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

DDD
Lepaskan: 2024-11-10 16:35:05
asal
803 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!

sumber:php.cn
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