Pourquoi `transform: rotate()` annule-t-il `z-index` ?

Z-index annulé par Transform(rotate)

Comprendre le comportement

En CSS, l'utilisation de la propriété transform peut créer un nouveau "contexte d'empilement " sur un élément. Cela signifie que l'élément et ses enfants forment une couche distincte dans le processus de rendu. De plus, les éléments avec des valeurs d'index z autres que celles par défaut créent également leurs propres contextes d'empilement.

Explication du problème

Dans le code fourni, l'élément .test a transform : rotate(10deg);, ce qui crée un contexte d'empilement. Ensuite, le pseudo-élément .test:after se voit attribuer un z-index : -1. Cependant, cela ne le place pas derrière .test.

Reason

Z-index fonctionne dans un contexte d'empilement. En définissant -webkit-transform sur .test, cela crée un nouveau contexte d'empilement pour l'élément et ses enfants. Par conséquent, z-index: -1 sur .test:after n'affecte que sa position dans le contexte d'empilement .test.

Solution

Pour résoudre ce problème, assurez-vous que .test et .test:after partage le même contexte d'empilement. Une façon d'y parvenir consiste à placer .test dans un conteneur d'emballage et à faire pivoter le conteneur à la place.

Exemple

Voici le code mis à jour :

.wrapper {
  -webkit-transform: rotate(10deg);
}

.test {
  width: 150px;
  height: 40px;
  margin: 30px;
  line-height: 40px;
  position: relative;
  background: white;
}

.test:after {
  width: 100px;
  height: 35px;
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  -webkit-box-shadow: 0 5px 5px #999;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

<div class="wrapper">
  <div class="test">z-index is canceled.</div>
</div>

Dans cet exemple , la rotation de transformation est appliquée au conteneur .wrapper, créant un contexte d'empilement unique pour .test et .test:after. Cela permet à z-index: -1 sur .test:after de prendre effet 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!