Pourquoi Overflow:hidden ne fonctionne-t-il pas avec les DIV internes positionnés de manière absolue, à moins que le DIV externe ne soit positionné de manière relative ?

Débordement caché et positionnement absolu

Dans un scénario avec des DIV imbriquées, où la DIV externe a un débordement : propriété cachée et la DIV interne est positionné de manière absolue, le DIV interne peut ne pas adhérer aux contraintes de débordement du DIV externe. Cela se produit lorsque le DIV externe n’est pas également positionné de manière absolue. La modification du DIV externe en position : absolue peut perturber la disposition globale.

Pour résoudre ce problème tout en conservant le positionnement souhaité du DIV interne dans une cellule de tableau, une autre approche peut être utilisée :

1. Définissez le DIV externe sur la position : relative. Cela établit un nouveau système de coordonnées pour les DIV internes.
2. Changez la position du DIV interne en position : absolue. Cela positionne le DIV interne par rapport à son ancêtre le plus proche, qui dans ce cas est le DIV externe.

Exemple :

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
}

<table>

Avec cet ajustement, la propriété overflow: Hidden du DIV externe contraindra désormais correctement le DIV interne, empêchant son contenu de s'étendre au-delà des limites du DIV externe. De plus, cette solution permet au DIV interne de se développer en dehors de la cellule du tableau, comme prévu.

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!