Mengapa Z-Index Saya Tidak Berfungsi dalam Internet Explorer 7?

Isu Lapisan Indeks Z-IE7: Dilema Konteks Susunan

Z-index, sifat CSS, membenarkan lapisan elemen HTML pada halaman web. Walau bagaimanapun, Internet Explorer 7 (IE7) mempamerkan tingkah laku luar biasa dengan pelapisan indeks-z.

Dalam senario ini, pembangun menetapkan indeks-z tinggi (1000) pada senarai UL, bertujuan untuk bertindih div . Walau bagaimanapun, div kekal kelihatan di hadapan UL. Isunya terletak pada tafsiran IE7 tentang konteks tindanan.

Konteks tindanan ialah lapisan bebas yang dibuat dalam proses pemaparan penyemak imbas, di mana nilai indeks-z dinilai secara berasingan dalam setiap konteks. IE7 mentafsirkan elemen diposisikan tanpa z-indeks eksplisit sebagai mencipta konteks tindanan baharu, walaupun spesifikasi CSS menyatakan sebaliknya.

Untuk menyelesaikan isu, tambah nilai indeks z eksplisit pada elemen rentang kedudukan:

#envelope-1 {
    position: relative;
    z-index: 1;
}

Ini akan mewujudkan konteks tindanan baharu untuk rentang dan memastikan senarai UL bertindih dengan div sebagai dimaksudkan.

Sebagai alternatif, reka bentuk semula dokumen untuk mengelak daripada menggunakan position:relative pada rentang, kerana ini memaksa penciptaan konteks tindanan yang berasingan:

<div>
    <label>Input #1:</label> <input>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Dengan memahami konsep konteks tindanan dan tafsiran mereka dalam IE7, pembangun boleh mengawal lapisan elemen dengan berkesan, walaupun ketika menghadapi ketidakkonsistenan khusus penyemak imbas.

Atas ialah kandungan terperinci Mengapa Z-Index Saya Tidak Berfungsi dalam Internet Explorer 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!