Warum bricht „transform' „z-index' ab und wie kann ich das beheben?

Z-Index durch Transformation aufgehoben: Stapelkontexte verstehen

Im bereitgestellten Code wird der Z-Index des „.test“-Elements aufgehoben wenn die Transformationseigenschaft angewendet wird. Um dieses Verhalten zu verstehen, müssen wir uns mit dem Konzept der Stapelkontexte befassen.

Eigenständige Stapelkontexte:

transform erstellt einen Stapelkontext für „.test“ Element. Stapelkontexte bestimmen die Reihenfolge der Elemente basierend auf ihren Z-Indexwerten. Elemente innerhalb desselben Stapelkontexts werden gemäß ihren Z-Indizes geschichtet, wobei höhere Werte vorne angezeigt werden.

Geerbte Stapelkontexte:

Der „.test:after „Pseudoelement hat einen negativen Z-Index (-1). Dieser Wert wirkt sich jedoch nur auf seine Position innerhalb des Stapelkontexts des „.test“-Elements aus. „.test:after“ wird nicht hinter „.test“ platziert, da der Z-Index nur innerhalb einzelner Stapelkontexte von Bedeutung ist.

Lösung des Problems:

An Damit der Z-Index wie erwartet funktioniert, stellen Sie sicher, dass „.test“ und „.test:after“ denselben Stapelkontext verwenden. Während das Drehen von „.test“ mit transform einen eigenen Stapelkontext erstellt, ermöglicht die Verwendung eines Wrapper-Elements und dessen Drehung, dass „.test:after“ denselben Kontext erbt.

Aktualisierter Code mit Wrapper:

Indem wir „.test“ in einen „.wrapper“ einschließen und die Transformation darauf anwenden, bewahren wir die Z-Index-Hierarchie für „.test:after“, während „.wrapper“ und „.test“ weiterhin rotieren.

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

Das obige ist der detaillierte Inhalt vonWarum bricht „transform' „z-index' ab und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!