Mengapakah `transform` Membatalkan `z-index` dan Bagaimana Saya Boleh Membetulkannya?

z-index Dibatalkan oleh Transform: Memahami Konteks Susunan

Dalam kod yang disediakan, z-index elemen ".test" dibatalkan apabila sifat transformasi digunakan. Untuk memahami tingkah laku ini, kita mesti menyelidiki konsep konteks tindanan.

Konteks Susun Kendiri:

transformasi mencipta konteks tindanan untuk ".test" unsur. Konteks tindanan menentukan susunan unsur berdasarkan nilai indeks znya. Elemen dalam konteks tindanan yang sama dilapisi mengikut indeks-znya, dengan nilai yang lebih tinggi muncul di hadapan.

Konteks Susunan Diwarisi:

The ".test:after " pseudo-element mempunyai indeks z negatif (-1). Walau bagaimanapun, nilai ini hanya mempengaruhi kedudukannya dalam konteks tindanan elemen ".test". Ia tidak meletakkan ".test:after" di belakang ".test" kerana indeks-z hanya bermakna dalam konteks tindanan individu.

Menyelesaikan Masalah:

Kepada mempunyai indeks-z berfungsi seperti yang diharapkan, pastikan ".test" dan ".test:after" berkongsi konteks tindanan yang sama. Semasa memutar ".test" dengan transform mencipta konteks tindanannya sendiri, menggunakan elemen pembungkus dan memutarnya membenarkan ".test:after" mewarisi konteks yang sama.

Kod Kemas Kini dengan Pembungkus:

Dengan melampirkan ".test" dalam ".wrapper" dan menggunakan transformasi padanya, kami mengekalkan indeks-z hierarki untuk ".test:after" sambil masih memutar kedua-dua ".wrapper" dan ".test."

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

Atas ialah kandungan terperinci Mengapakah `transform` Membatalkan `z-index` dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!