Mengapa indeks-z Gagal pada Elemen Berubah dan Bagaimana Ia Boleh Dibetulkan?

z-index Dibatalkan Kerana Transformasi

Dalam kod yang anda berikan, sifat CSS z-index kehilangan kefungsian apabila digunakan pada elemen . ujian selepas menggunakan sifat transformasi. Isu ini timbul kerana sifat transformasi mewujudkan konteks tindanan baharu untuk elemen.

Konteks tindanan menentukan susunan unsur bertindih dipaparkan. Biasanya, elemen dengan nilai indeks z yang lebih tinggi muncul di atas elemen dengan nilai indeks z yang lebih rendah dalam konteks tindanan yang sama. Walau bagaimanapun, indeks-z hanya digunakan dalam konteks tindanan tunggal.

Dalam senario anda, elemen .test dengan sifat transformasinya telah mencipta konteks tindanannya sendiri. Unsur pseudo .test:after, walaupun anak .test, kekal dalam konteks tindanan baharu ini. Oleh itu, menetapkan z-index: -1 pada .test:after hanya meletakkannya dalam konteks tindanan .test tetapi tidak meletakkannya di belakang .test.

Untuk menyelesaikannya, anda boleh **membuat yang baharu menyusun konteks untuk kedua-dua .test dan .test:after** dengan membungkusnya dalam elemen bekas. Pendekatan ini memastikan bahawa mereka berkongsi konteks tindanan yang sama, membolehkan z-index` berfungsi seperti yang diharapkan.

Berikut ialah kod yang diubah suai:

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

Dengan mencipta konteks tindanan yang berasingan untuk .wrapper , kedua-dua .test dan .test:after berkongsi konteks yang sama. Ini membolehkan indeks-z meletakkan .test:selepas di belakang .test dengan betul sambil mengekalkan putaran yang diingini.

Atas ialah kandungan terperinci Mengapa indeks-z Gagal pada Elemen Berubah dan Bagaimana Ia Boleh Dibetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!