Der Z-Index wird durch Einstellen der Transformation (Drehen) gelöscht.

84

Mit der Transformationseigenschaft wird der Z-Index gelöscht und vorne angezeigt. (Beim Auskommentieren von -webkit-transform funktioniert der Z-Index im folgenden Code ordnungsgemäß.)

.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>
Erweitern Sie das Snippet

Wie arbeiten Transformation und Z-Index zusammen?

css z-index transform kbth
quelle
Dies ist die Geige, die ich gemacht habe. Möchten Sie den Text mit dem Z-Index ausblenden?
Surjith SM
Funktioniert gut jsfiddle.net/raunakkathuria/8MQkP Was ist eigentlich der Zweifel?
Raunak Kathuria
Danke, dass du Geige gemacht hast. Ich möchte den Schatten hinter dem Textrechteck zeigen (wie ein Post-It).
kbth

Antworten:

140

Lassen Sie uns durch das Geschehen gehen. Beachten Sie zunächst, dass z-indexauf positionierten Elementen und transformselbst neue " Stapelkontexte " auf Elementen erstellt werden. Folgendes ist los:

Ihr .testElement hat transformsich auf etwas anderes als keines gesetzt, wodurch es einen eigenen Stapelkontext erhält.

Sie fügen dann ein .test:afterPseudoelement hinzu, das ein Kind von ist .test. Dieses Kind hat z-index: -1, die Einstellung der Stapelebene der .test:after im Stapel Rahmen der.test Einstellung z-index: -1auf .test:afternicht legen es nicht hinter , .testweil z-indexnur innerhalb eines bestimmten Stapel Kontext eine Bedeutung hat.

Wenn Sie entfernen -webkit-transformaus .testes seinen Stapelkontext entfernt, wodurch .testund .test:aftereinen Stapelkontext zu teilen (das von <html>) und machen .test:afterunterwegs hinten .test. Beachten Sie, dass Sie nach dem Entfernen .testder -webkit-transformRegel erneut einen eigenen Stapelkontext festlegen können, indem Sie eine neue z-indexRegel (einen beliebigen Wert) aktivieren .test(erneut, da sie positioniert ist)!

Wie lösen wir Ihr Problem?

Stellen Sie sicher, dass der Z-Index wie erwartet funktioniert, .testund verwenden Sie .test:afterdenselben Stapelkontext. Das Problem ist, dass Sie .testmit Transformation gedreht werden möchten , dies jedoch bedeutet, dass ein eigener Stapelkontext erstellt wird. Glücklicherweise können die untergeordneten Elemente .testin einen Verpackungsbehälter gelegt und gedreht werden, sodass sie weiterhin einen Stapelkontext gemeinsam nutzen können, während beide gedreht werden.

  • Folgendes haben Sie begonnen: http://jsfiddle.net/fH64Q/

  • Und hier ist eine Möglichkeit, wie Sie die Stapelkontexte umgehen und die Rotation beibehalten können (beachten Sie, dass der Schatten aufgrund des .testweißen Hintergrunds etwas abgeschnitten wird ):

.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>
Erweitern Sie das Snippet

Es gibt andere Möglichkeiten, dies zu tun, sogar bessere. Ich würde wahrscheinlich den "Post-It" -Hintergrund zum enthaltenden Element machen und dann den Text einfügen, das wäre wahrscheinlich die einfachste Methode und würde die Komplexität Ihrer Inhalte verringern.

In diesem Artikel finden Sie weitere Informationen zur z-indexStapelreihenfolge oder zur funktionierenden W3C CSS3-Spezifikation zum Stapelkontext

Lochlan
quelle
4
Dies war eine großartige Erklärung für einen der komplexesten Aspekte des CSS-Layouts. Für zukünftige Lektüre überprüfen Sie die W3-Spezifikation
AndyBean
12

Stellen Sie das Div ein, auf das Sie oben bleiben möchten position:relative

AGrush
quelle
1
Es hat bei mir funktioniert. Hängt es mit dem oben erwähnten Stapelkontext zusammen? Wenn jemand helfen kann, dies zu klären, wird dies sehr geschätzt.
Glihm
7

Hatte ein ähnliches Problem, wo Geschwister waren transform: translate()und z-indexnicht arbeiten würden.

Die einfachste Lösung besteht darin, position: relativealle Geschwister einzustellen und dann z-indexwieder zu arbeiten.

Sucher von Bacon
quelle
5

Schnellkorrektur: Sie können das andere Element auch um 0 Grad drehen.

Kerl
quelle
Dies funktionierte für mich in einem Fall, in dem ich den Container nicht drehen konnte
Daniel Flippance
1
Ich hatte ein seltsames Problem damit, dass der Z-Index nicht beobachtet wurde, und dann wurde er durch Anwenden des Stils transform:rotate(0.0rad)behoben. Ich konnte es nicht über eine CSS-Regel anwenden, es musste direkt auf dem Element sein. Das macht keinen Sinn, aber danke, dass du die Antwort gepostet hast, die mich dazu gebracht hat, es zu versuchen.
Andrew Shepherd
1

Ich stand vor dem ähnlichen Problem. Ich habe dem Test ein Wrapper-Div hinzugefügt und dem Wrapper-Div die Transformationseigenschaft gegeben.

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

Hier ist die Geige http://jsfiddle.net/KmnF2/16/

Ankur Sahu
quelle
-1

Stellen Sie das Div, das Sie oben behalten möchten, auf Position: absolut


quelle