Comment résoudre les problèmes de chevauchement de divisions avec z-index ?

Résoudre le chevauchement de divs à l'aide de z-index

Dans certains scénarios, vous pouvez rencontrer des problèmes de chevauchement de divs même lorsque vous utilisez la propriété z-index . Pour garantir l'effet de superposition souhaité, il est important de comprendre l'utilisation correcte de z-index et d'envisager d'utiliser des propriétés CSS supplémentaires pour créer un contexte d'empilement.

Dans l'exemple donné, le comportement prévu est que div1 apparaisse au-dessus div2. Cependant, le simple fait d'attribuer une valeur d'indice z plus élevée à div1 ne donne pas toujours le résultat attendu. Pour résoudre ce problème, vous devez ajouter la propriété position: relative aux deux divs. Cela crée un contexte d'empilement au sein des éléments, permettant à z-index de prendre effet correctement.

Le code modifié ci-dessous intègre ce correctif :

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

En ajoutant position: relative aux deux divs, nous créons un contexte d'empilement dédié pour ces éléments. Cela garantit que la valeur d'index z la plus élevée attribuée à div1 est respectée, ce qui entraîne l'affichage de div1 au-dessus de div2 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!