Pourquoi div1 n'apparaît-il pas au-dessus de div2 malgré un z-index plus élevé ?

Placer une division au-dessus d'une autre division à l'aide de z-index

Dans le développement Web, vous pouvez rencontrer des situations dans lesquelles vous devez superposer des divs les unes sur les autres pour obtenir l'objectif souhaité. effets visuels. Cependant, vous constaterez peut-être que l'utilisation de z-index ne produit pas toujours les résultats escomptés.

Un problème courant est lorsque div1 refuse d'apparaître au-dessus de div2 malgré l'attribution d'une valeur de z-index plus élevée. La raison derrière cela pourrait être le manque de contexte d'empilement approprié.

Pour établir un contexte d'empilement, vous devez ajouter la propriété CSS position: relative aux deux divs. Cela crée un nouveau contexte d'empilement dans lequel les valeurs de l'index z peuvent fonctionner comme prévu.

Voici une version mise à jour de votre code :

<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>

Avec cette modification, div1 devrait désormais apparaître correctement au-dessus div2. N'oubliez pas que le z-index n'affecte l'ordre d'empilement que dans le même contexte d'empilement.

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!