Rumah > hujung hadapan web > tutorial css > Mengapa Z-Index Berkelakuan Berbeza dalam IE 6 dan IE 7?

Mengapa Z-Index Berkelakuan Berbeza dalam IE 6 dan IE 7?

DDD
Lepaskan: 2024-11-10 16:35:05
asal
894 orang telah melayarinya

Why Does Z-Index Behave Differently in IE 6 and IE 7?

IE 6 & IE 7 Z-Index: Di Sebalik Konteks Susun

Apabila bekerja dengan IE 6 atau IE 7, anda mungkin menghadapi perkara yang tidak dijangka tingkah laku apabila cuba menyusun elemen menggunakan sifat z-index. Untuk memahami isu ini, adalah penting untuk menyelidiki konsep "konteks tindanan" dalam CSS.

Konteks Penimbunan

Menurut spesifikasi CSS, kawalan z-index susunan susunan elemen dalam "konteks tindanan" yang sama. Konteks tindanan diwujudkan apabila elemen mempunyai kedudukan bukan automatik (mutlak, tetap atau relatif) dan nilai indeks z yang ditentukan.

Anomali Susunan IE

IE 6 dan IE 7 menonjol daripada penyemak imbas lain dalam elemen yang diposisikan (walaupun yang tidak mempunyai indeks-z yang dinyatakan secara eksplisit) secara tersirat mencipta baharu menyusun konteks. Tingkah laku ini menyimpang daripada spesifikasi CSS.

Kesan pada Gelagat Indeks-Z

Dalam IE 6 dan IE 7, apabila dua elemen mempunyai set indeks-z, perbandingan untuk menentukan susunan tindanan berlaku pada tahap ibu bapa susun mereka (biasanya nenek moyang mereka yang tidak statik secara kedudukan). Jika ibu bapa ini tidak mempunyai indeks-z yang ditentukan, susunan dokumen menentukan susunan.

Penyelesaian

Untuk menyelesaikan isu ini, tetapkan nilai indeks-z secara eksplisit untuk ibu bapa yang bertindan elemen yang ingin anda susun dengan betul. Mulakan pada ibu bapa yang lebih rendah dan tingkatkan hierarki bersarang anda, menetapkan nilai indeks z yang menurun untuk memastikan susunan yang betul.

Dengan memahami gelagat menyusun konteks dalam IE 6 dan IE 7, anda boleh memanipulasi z dengan berkesan -harta indeks untuk mencapai hasil susun yang diingini tanpa akibat yang tidak dijangka.

Atas ialah kandungan terperinci Mengapa Z-Index Berkelakuan Berbeza dalam IE 6 dan IE 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan