Pourquoi « transform » annule-t-il « z-index » et comment puis-je y remédier ?

z-index annulé par transformation : compréhension des contextes d'empilement

Dans le code fourni, le z-index de l'élément ".test" est annulé lorsque la propriété transform est appliquée. Pour comprendre ce comportement, nous devons approfondir le concept de contextes d'empilement.

Contextes d'empilement autonomes :

transform crée un contexte d'empilement pour le ".test" élément. Les contextes d'empilement déterminent l'ordre des éléments en fonction de leurs valeurs d'index z. Les éléments dans le même contexte d'empilement sont superposés en fonction de leurs indices z, les valeurs plus élevées apparaissant devant.

Contextes d'empilement hérités :

Le ".test : après " Le pseudo-élément a un z-index négatif (-1). Cependant, cette valeur n'affecte que sa position dans le contexte d'empilement de l'élément ".test". Il ne place pas ".test:after" derrière ".test" car z-index n'a de sens que dans des contextes d'empilement individuels.

Résoudre le problème :

Pour Pour que z-index fonctionne comme prévu, assurez-vous que ".test" et ".test:after" partagent le même contexte d'empilement. Tandis que la rotation de ".test" avec transform crée son propre contexte d'empilement, l'utilisation d'un élément wrapper et sa rotation permettent à ".test:after" d'hériter du même contexte.

Code mis à jour avec Wrapper :

En enfermant ".test" dans un ".wrapper" et en lui appliquant la transformation, nous préservons la hiérarchie z-index pour ".test:after" tandis que toujours en rotation à la fois ".wrapper" et ".test."

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

.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;
}

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!