Bagaimana untuk Menyelesaikan Isu Z-Index dengan Div dalam Internet Explorer 6 dan 7?

Internet Explorer 6 dan 7 Z-Index Masalah

Isu:

Di tapak web http://madisonlane.businesscatalyst.com, isu timbul apabila div#sign-post gagal bertindih div#bottom, walaupun ia sepatutnya dipaparkan di atasnya. Selain itu, 198px tambahan muncul di bahagian atas div#bottom dalam IE6.

Memahami Indeks-Z dan Konteks Penimbunan

Sifat indeks-z menentukan lapisan elemen dalam HTML. Walau bagaimanapun, dalam IE6 dan IE7, tingkah laku standard berbeza sedikit.

Mengikut spesifikasi, elemen dengan atribut kedudukan bukan lalai mencipta "konteks tindanan" baharu. Elemen dalam konteks tindanan yang sama dibandingkan berdasarkan nilai indeks z mereka dan elemen dengan nilai yang lebih tinggi muncul di atas.

Dalam kes tapak web yang diberikan, masalah timbul kerana IE6 dan IE7 mencipta tindanan konteks untuk kedua-dua div#sign-post dan div#bottom, walaupun mereka tidak mempunyai nilai z-index yang jelas. Akibatnya, pesanan dokumen mengatasi pesanan indeks-z yang diingini.

Penyelesaian:

Untuk menyelesaikan isu, adalah perlu untuk mencipta elemen induk yang bertindak sebagai "induk susun" untuk kedua-dua div#sign-post dan div#bottom. Elemen ini harus mempunyai atribut kedudukan bukan lalai (mis., relatif atau mutlak) dan nilai indeks z yang jelas.

Dengan berbuat demikian, anda memastikan bahawa susunan div#sign-post dan div#bottom ditentukan dalam konteks tindanan yang sama, dan keutamaan indeks z yang diingini ditetapkan.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Isu Z-Index dengan Div dalam Internet Explorer 6 dan 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!