Comment réparer les Divs qui apparaissent dans le désordre malgré une utilisation correcte du z-Index ?

Contrôle de l'ordre d'empilement avec z-index

Lors de la superposition d'éléments en HTML, z-index contrôle quels éléments apparaissent en haut. Malgré l'utilisation correcte de z-index, on peut rencontrer des cas où un div reste sous un autre div.

Pour résoudre ce problème, considérez ce qui suit :

Code CSS :

<code class="css">div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}</code>

Explication :

1. Ajouter une position : par rapport aux deux divs pour créer un contexte d'empilement. Cela permet au z-index de fonctionner correctement.
2. Définissez un z-index plus élevé pour le div qui doit apparaître en haut (div1).
3. Assurez-vous que le z-index du div sous-jacent ( div2) est inférieur.

En mettant en œuvre ces étapes, div1 apparaîtra correctement au-dessus de div2 dans l'ordre d'empilement 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!