Maison > interface Web > tutoriel CSS > Pourquoi ne fonctionne-t-il pas Overflow:hidden sur les DIV imbriqués absolument positionnés, à moins que le parent ne soit positionné relativement ?

Pourquoi ne fonctionne-t-il pas Overflow:hidden sur les DIV imbriqués absolument positionnés, à moins que le parent ne soit positionné relativement ?

Patricia Arquette
Libérer: 2024-12-02 15:23:12
original
536 Les gens l'ont consulté

Why Doesn't Overflow:hidden Work on Absolutely Positioned Nested DIVs Unless the Parent is Positioned Relatively?

Positionnement absolu et énigme cachée de débordement

Lorsque vous traitez des DIV imbriqués, il peut être difficile d'appliquer des propriétés cachées de débordement sur le DIV externe si il n'est pas positionné de manière absolue. Cela peut conduire au DIV interne, qui est positionné de manière absolue, sans tenir compte du comportement caché de débordement.

Considérez la structure HTML suivante :

<div>
Copier après la connexion

Où #first a une propriété cachée de débordement et # la seconde est positionnée de manière absolue. Dans ce scénario, #second ne respectera pas la contrainte cachée de débordement.

Pour résoudre ce problème sans définir #first sur position absolue, envisagez la solution suivante :

  1. Position #first en tant que relatif :

    #first {
      position: relative;
    }
    Copier après la connexion
  2. Gardez la #seconde positionnée absolument :

    #second {
      position: absolute;
    }
    Copier après la connexion

Avec cette configuration, #second adhérera désormais à la propriété cachée de débordement de #first. Cela vous permet de conserver la disposition souhaitée tout en garantissant que le DIV interne respecte les contraintes de débordement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal