Pourquoi « overflow : hidden » ne fonctionne-t-il pas sur un DIV interne absolument positionné à moins que le DIV externe ne soit positionné de manière relative ?

Position absolue et débordement caché

Lorsqu'il s'agit de DIV imbriqués, il peut être difficile de contrôler l'affichage du DIV interne dans les limites du DIV externe, en particulier lors de l'utilisation de propriétés telles que le débordement caché. Cette question examine un scénario spécifique dans lequel le DIV externe n'est pas positionné de manière absolue, ce qui amène le DIV interne positionné à ignorer absolument la directive cachée de débordement du DIV externe.

Pour résoudre ce problème, la solution proposée implique de modifier le positionnement. du DIV externe en relatif et en maintenant le positionnement absolu du DIV interne. Voici comment cela fonctionne :

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

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

En définissant le DIV externe sur position : relative, vous établissez un nouveau système de coordonnées au sein de cet élément, qui sert de point de référence pour la position du DIV interne. Cela permet au DIV interne de rester ancré au DIV externe tout en adhérant à la contrainte cachée de débordement du DIV externe. Dans cette configuration, le contenu du DIV interne sera découpé dans les limites du DIV externe.

Alternativement, vous pouvez également envisager d'utiliser position:fixed pour le DIV interne, qui fixera plutôt sa position par rapport à la fenêtre d'affichage. que le DIV externe. Cette approche pourrait fournir plus de contrôle sur le placement du DIV interne, surtout si vous devez le positionner en dehors des limites du DIV externe.

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!