Pourquoi z-index échoue-t-il sur les éléments transformés et comment peut-il être corrigé ?

z-index annulé en raison d'une transformation

Dans votre code fourni, la propriété CSS z-index perd sa fonctionnalité lorsqu'elle est appliquée à l'élément . test après avoir appliqué une propriété de transformation. Ce problème se pose car la propriété transform établit un nouveau contexte d'empilement pour l'élément.

Les contextes d'empilement déterminent l'ordre dans lequel les éléments qui se chevauchent sont affichés. En règle générale, les éléments avec une valeur d'index z plus élevée apparaissent au-dessus des éléments avec une valeur d'index z inférieure dans le même contexte d'empilement. Cependant, z-index ne s'applique que dans un seul contexte d'empilement.

Dans votre scénario, l'élément .test avec sa propriété transform a créé son propre contexte d'empilement. Le pseudo-élément .test:after, bien qu'enfant de .test, reste dans ce nouveau contexte d'empilement. Par conséquent, définir z-index: -1 sur .test:after le positionne uniquement dans le contexte d'empilement de .test mais ne le place pas derrière .test.

Pour résoudre ce problème, vous pouvez **créer un nouveau contexte d'empilement pour .test et .test:after** en les enveloppant dans un élément conteneur. Cette approche garantit qu'ils partagent le même contexte d'empilement, permettant à z-index` de fonctionner comme prévu.

Voici le code modifié :

.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; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}

En créant un contexte d'empilement distinct pour .wrapper , .test et .test:after partagent le même contexte. Cela permet à z-index de positionner correctement .test:after derrière .test tout en conservant la rotation souhaitée.

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!