web-dev-qa-db-fra.com

L'index z est annulé en définissant la transformation (rotation)

En utilisant la propriété transform, z-index est annulé et est apparu à l'avant. (Lorsque vous commentez -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 la transformation et le z-index fonctionnent-ils ensemble?

csscss3z-indextransform
63
kbth

Voyons ce qui se passe. Pour commencer, notez que z-index sur les éléments positionnés et transform créent par eux-mêmes de nouveaux " contextes d'empilement " sur les éléments. Voici ce qui se passe:

Votre .test l'élément a transform défini sur autre chose que none, ce qui lui donne son propre contexte d'empilement.

Vous ajoutez ensuite un .test:after pseudo-élément, qui est un enfant de .test. Cet enfant a z-index: -1, définissant le niveau de pile de .test:after dans le contexte d'empilement de .test Réglage z-index: -1 sur .test:after ne le place pas derrière .test car z-index n'a de sens que dans un contexte d'empilement donné.

Lorsque vous supprimez -webkit-transform de .test il supprime son contexte d'empilement, provoquant .test et .test:after pour partager un contexte d'empilement (celui de <html>) et faire .test:after aller derrière .test. Notez qu'après avoir supprimé .test's -webkit-transform règle vous pouvez, encore une fois, lui donner son propre contexte d'empilement en définissant un nouveau z-index règle (n'importe quelle valeur) sur .test (encore une fois, car il est positionné)!

Alors, comment pouvons-nous résoudre votre problème?

Pour que le z-index fonctionne comme prévu, assurez-vous que .test et .test:after partage le même contexte d'empilement. Le problème est que vous voulez .test tourné avec transform, mais cela signifie créer son propre contexte d'empilement. Heureusement, en plaçant .test dans un conteneur d'emballage et en rotation qui permettra toujours à ses enfants de partager un contexte d'empilement tout en tournant les deux.

  • Voici ce que vous avez commencé: http://jsfiddle.net/fH64Q/

  • Et voici un moyen de contourner les contextes d'empilement et de conserver la rotation (notez que l'ombre est un peu coupée à cause de .test 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 le faire, même de meilleures façons. Je ferais probablement de l'arrière-plan "post-it" l'élément contenant, puis je mettrais le texte à l'intérieur, ce serait probablement la méthode la plus simple et réduirait la complexité de ce que vous avez.

Consultez cet article pour plus de détails sur z-index et l'ordre d'empilement, ou la spécification W3C CSS3 de travail sur le contexte d'empilement

118
Lochlan

Solution rapide: vous pouvez également faire pivoter l'autre élément de 0 degré également.

3
Guy

Définissez le div sur lequel vous souhaitez rester en haut position:relative

1
AGrush

J'étais confronté au même problème. Ce que j'ai fait, j'ai ajouté une div wrapper autour du test et donné la propriété transform à la div wrapper.

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

voici le violon http://jsfiddle.net/KmnF2/16/

0
Ankur Sahu

A eu un problème similaire où les frères et sœurs étaient transform: translate() 'd et z-index ne fonctionnerait pas.

La solution la plus simple consiste à définir position: relative sur tous les frères et sœurs, puis z-index fonctionnerait à nouveau.

0
seeker_of_bacon