z-index est annulé par le réglage transform(rotation)
en utilisant la propriété transform, l'index z est annulé et est apparu à l'avant. (Lorsque commenter -webkit-transform, z-index fonctionne correctement dans le code ci-dessous)
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
-webkit-transform: rotate(10deg);
}
.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;
}<html>
<head>
<title>transform</title>
<link rel="stylesheet" type="text/css" href="transformtest.css">
</head>
<body>
<div class="test">z-index is canceled.</div>
</body>
</html>comment transform et z-index fonctionnent-ils ensemble?
3 réponses
examinons ce qui se passe. Pour commencer, notez que transform par lui-même créer de nouveaux "empilement des contextes" sur les éléments. Voici ce qu'il se passe:
.test élément transform définir quelque chose d'autre que none, ce qui lui donne sa propre contexte d'empilement.
vous ajoutez alors un .test:after pseudo-élément, qui est un enfant de .test. Cet enfant a z-index: -1, paramétrant le niveau de la pile de .test:after dans le contexte d'empilement de .testz-index: -1.test:after ne pas placer derrière .test parce que z-index n'a de sens que dans un contexte d'empilement.
quand vous supprimez -webkit-transform.test il supprime son contexte d'empilage, provoquant .test et .test:after pour partager un contexte d'empilage (celui de <html>) et la fabrication .test:after derrière .test. Notez qu'après avoir supprimé .test-webkit-transform règle, vous pouvez, une fois de plus, lui donner sa propre empilage contexte en établissant un nouveau z-index règle (n'importe quelle valeur) sur .test (encore une fois, parce qu'il est positionné)!
alors comment résoudre votre problème?
pour que z-index fonctionne comme prévu, assurez-vous que .test et .test:after partager le même contexte d'empilement. Le problème, c'est que vous voulez .test a tourné avec transform, mais pour ce faire, il faut créer son propre contexte d'empilage. Heureusement, placer .test dans un contenant d'emballage et en rotation qui toujours permettre à ses enfants de partager un contexte d'empilage tout en faisant tourner les deux.
Voici ce que vous avez commencé avec: http://jsfiddle.net/fH64Q/
et voici un moyen de contourner les contextes d'empilage et de garder la rotation (notez que l'ombre est un peu coupée à cause de
.test's fond blanc):
.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;
}<div class="wrapper">
<div class="test">z-index is canceled.</div>
</div>il y a d'autres façons de faire ce, à de meilleures façons même. Je ferais probablement l'arrière-plan "post-it" l'élément contenant et puis mettre le texte à l'intérieur, ce serait probablement la méthode la plus facile et réduirait la complexité de ce que vous avez.
découvrez cet article pour plus de détails sur le travail du W3C CSS3 spec sur l'empilement contexte
je faisais face au même problème. Ce que j'ai fait, c'est ajouter une div wrapper autour du test et donner la propriété transform à la div wrapper.
.wrapper{
transform: rotate(10deg);
}
voici le violon http://jsfiddle.net/KmnF2/16/
correction rapide: vous pouvez simplement tourner l'autre élément de 0 degrés aussi bien.