Comment puis-je faire en sorte qu'un DIV interne absolument positionné respecte la propriété Overflow:hidden de son parent ?

Position absolue vs débordement caché

Dilemme :

Nous avons deux DIV imbriqués : un DIV externe avec débordement : caché et un DIV interne positionné de manière absolue. Par défaut, le DIV interne n’adhère pas au comportement de débordement du DIV externe. Comment pouvons-nous maintenir ce comportement sans modifier la position du DIV externe en absolue, ce qui perturberait notre disposition ?

Solution :

Pour garantir que le DIV interne respecte les DIV externes propriété de débordement :

1. Modifiez la position du DIV externe en relatif.
2. Maintenir le positionnement absolu du DIV interne.

Exemple :

#outer {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: hidden;
  position: relative;  // Make outer DIV relative
}

#inner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;  // Keep inner DIV absolute
  left: 250px;
  top: 250px;
}

Remarques supplémentaires :

• Utilisation de la position : relative pour le DIV externe n'affecte pas son affichage ou mise en page.
• Le DIV interne doit rester position : absolue pour "échapper" aux limites du DIV externe tout en respectant son comportement de débordement.
• Pour le cas spécifique d'avoir un DIV interne en croissance hors d’une cellule du tableau, la solution reste la même. En positionnant la cellule externe du tableau sur relative et la DIV interne sur absolue, vous obtenez l'effet souhaité.

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!