Warum schlägt der Z-Index bei transformierten Elementen fehl und wie kann das Problem behoben werden?

z-index wegen Transformation abgebrochen

In Ihrem bereitgestellten Code verliert die CSS-Eigenschaft z-index ihre Funktionalität, wenn sie auf das Element angewendet wird. Test nach dem Anwenden einer Transformationseigenschaft. Dieses Problem entsteht, weil die Transformationseigenschaft einen neuen Stapelkontext für das Element erstellt.

Stapelkontexte bestimmen die Reihenfolge, in der überlappende Elemente angezeigt werden. Normalerweise erscheinen Elemente mit einem höheren Z-Indexwert über Elementen mit einem niedrigeren Z-Indexwert innerhalb desselben Stapelkontexts. Der Z-Index gilt jedoch nur innerhalb eines einzelnen Stapelkontexts.

In Ihrem Szenario hat das .test-Element mit seiner Transformationseigenschaft einen eigenen Stapelkontext erstellt. Das Pseudoelement .test:after bleibt in diesem neuen Stapelkontext, obwohl es ein untergeordnetes Element von .test ist. Wenn Sie also z-index: -1 auf .test:after setzen, wird es nur innerhalb des Stapelkontexts von .test positioniert, aber nicht hinter .test.

Um dieses Problem zu lösen, können Sie **ein neues erstellen Stapelkontext für .test und .test:after**, indem Sie sie in ein Containerelement einschließen. Dieser Ansatz stellt sicher, dass sie denselben Stapelkontext verwenden, sodass z-index wie erwartet funktioniert.

Hier ist der geänderte Code:

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

Durch Erstellen eines separaten Stapelkontexts für .wrapper , .test und .test:after haben denselben Kontext. Dadurch kann der Z-Index .test:after korrekt hinter .test positionieren und gleichzeitig die gewünschte Drehung beibehalten.

Das obige ist der detaillierte Inhalt vonWarum schlägt der Z-Index bei transformierten Elementen fehl und wie kann das Problem behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!