Mengapa Z-index Tidak Berfungsi dengan Elemen Kedudukan Relatif dalam Internet Explorer?

Elemen Bertindih dalam Internet Explorer: The Z-index Conundrum

Dalam bidang pembangunan web yang luas, mencapai kedudukan elemen yang lancar kadangkala boleh teka-teki, terutamanya dalam dunia Internet Explorer. Satu isu biasa timbul apabila cuba meletakkan elemen di atas elemen lain yang diletakkan secara relatif. Walaupun menggunakan sifat indeks-z, elemen yang bertindih tetap berdegil di belakang rakan sejawatannya.

The Enigma Unveiled

Gelagat pelik dalam Internet Explorer berpunca daripada batasan yang wujud. daripada enjin renderingnya. Apabila elemen diletakkan secara relatif, ia mewujudkan sistem koordinat baharu yang tidak mengganggu elemen statik lain. Akibatnya, sifat z-index kehilangan keberkesanannya dalam konteks ini.

Penyelesaian Aneh: Tipu dengan CSS

Daripada melawan had semula jadi Internet Explorer, kita boleh memanfaatkan keistimewaannya untuk mencapai kesan yang diingini. Dalam kes ini, kami menggunakan penyelesaian yang agak mengejutkan tetapi berkesan: menambahkan imej latar belakang pada elemen bertindih.

Dengan memberikan imej latar belakang, walau bagaimanapun minimum, kami pada asasnya memaksa Internet Explorer mengenali entiti sebagai elemen yang diposisikan . Akibatnya, sifat z-index memperoleh semula kuasanya, membolehkan kami mengawal lapisan elemen.

Berikut ialah contoh CSS yang menunjukkan penyelesaian yang tidak dijangka tetapi berfungsi ini:

<code class="css">.myLinkCssClass {
    background          : url(#);
}</code>

Dengan menambahkan gaya ini peraturan kepada elemen bertindih, kami mencipta imej latar belakang yang tidak kelihatan yang memperdayakan Internet Explorer untuk menganggapnya sebagai diposisikan. Akibatnya, sifat indeks-z kini diutamakan, membolehkan kami meletakkan elemen itu berbanding rakan sejawatannya yang agak berkedudukan.

Atas ialah kandungan terperinci Mengapa Z-index Tidak Berfungsi dengan Elemen Kedudukan Relatif dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!