Pourquoi le premier DIV Div1 est-il toujours visible lorsqu'on lui attribue une valeur d'index Z inférieure à celle de Div2 ?

Utiliser le z-index pour superposer des DIV

Cette question explore l'utilisation du z-index pour contrôler l'ordre d'empilement des éléments DIV. L'interrogateur tente de superposer un DIV (div1) sur un autre (div2) à l'aide du z-index, mais l'effet souhaité n'est pas obtenu.

Le code fourni comprend deux éléments DIV avec des valeurs z-index différentes :

<code class="css">.div1 {
  z-index: 1;
}
.div2 {
  z-index: 2;
}</code>

Malgré le z-index plus élevé de div2, div1 reste visible devant lui. En effet, la position de l'élément n'est pas explicitement définie.

Pour résoudre ce problème, il est nécessaire d'ajouter position: relative aux deux divs. Cela crée un contexte d'empilement, permettant aux éléments d'être positionnés les uns par rapport aux autres. Le code mis à jour serait :

<code class="css">.div1 {
  z-index: 2;
  position: relative;
}
.div2 {
  z-index: 1;
  position: relative;
}</code>

Avec cette modification, div1 sera correctement positionné au-dessus de div2, car la valeur du z-index est prioritaire dans le contexte d'empilement créé.

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!