z-Indeks jest anulowany przez ustawienie transform(rotate)

Używając właściwości transform, z-index jest anulowany i pojawia się z przodu. (Podczas komentowania out-webkit-transform, z-index działa poprawnie w poniższym kodzie) 

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

Jak transform i z-index współpracują ze sobą?

Author: Lionel, 2013-12-31
Source

3 answers

Przejdźmy przez to, co się dzieje. Na początek zauważ, że {[2] } na elementach pozycjonowanych i transform same tworzą nowe konteksty" stacking contexts " na elementach. Oto co się dzieje:

Twój .test element ma transform ustawione na coś innego niż none, co nadaje mu własny kontekst układania.

Następnie dodajesz .test:after pseudo-element, który jest potomkiem .test. To dziecko ma z-index: -1, ustawiając poziom stosu .test:after w kontekście układania .test Ustawienie z-index: -1 na .test:after nie umieszcza go za .test, Ponieważ z-index ma znaczenie tylko w danym kontekście układania.

Kiedy usuniesz -webkit-transform z .test, usunie kontekst układania, powodując, że .test i .test:after dzielą kontekst układania (ten z <html>) i sprawiasz, że .test:after pozostają za .test. Zauważ, że po usunięciu .test ' S -webkit-transform reguła możesz, po raz kolejny, nadać jej własny kontekst układania, ustawiając nową z-index regułę (dowolną wartość) na .test (ponownie, ponieważ jest pozycjonowanie)!

Jak rozwiążemy Twój problem?

Aby z-index działał zgodnie z oczekiwaniami, upewnij się, że .test i .test:after mają ten sam kontekst układania. Problem polega na tym, że chcesz .test obracać za pomocą transform, ale aby to zrobić, oznacza stworzenie własnego kontekstu układania. Na szczęście umieszczenie .test w pojemniku do owijania i obracanie, które nadal pozwoli dzieciom dzielić kontekst układania, jednocześnie obracając oba.

  • Oto co zacząłeś od: http://jsfiddle.net/fH64Q/

  • A oto sposób, w jaki można obejść układanie-konteksty i zachować obrót (zauważ, że cień zostaje nieco odcięty z powodu białego tła .test):

.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>
Są inne sposoby, by to zrobić, nawet lepsze. Prawdopodobnie zrobiłbym tło "post-it" jako element zawierający, a następnie wstawił tekst do środka, to prawdopodobnie byłaby najprostsza metoda i zmniejszy złożoność tego, co masz. Aby uzyskać więcej informacji na temat z-index i kolejności układania, lub działającej specyfikacji W3C CSS3 na temat kontekstu układania
 92
Author: Lochlan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-12 16:28:24

Miałem podobny problem. Zrobiłem to, dodałem wrapper div wokół testu i dałem właściwość transform do wrapper div.

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

Oto skrzypce http://jsfiddle.net/KmnF2/16/

 0
Author: Ankur Sahu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-24 13:04:04

Quick fix: można po prostu obrócić drugi element o 0 stopni, jak również.

 0
Author: Guy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-14 16:51:18