Opacity lwn. Z-Index: Mengapa Z-Index Tidak Sentiasa Berfungsi dengan Elemen Separuh Lutsinar?

Opacity vs. Z-Index: The Invisible Overlay

Apabila melapis elemen dalam penyemak imbas web, dua sifat utama akan dimainkan: kelegapan dan indeks-z. Kelegapan mengawal ketelusan elemen, manakala indeks-z menentukan kedudukannya dalam susunan susunan. Walau bagaimanapun, interaksi yang mengejutkan antara sifat ini telah ditemui.

Masalah: Bercanggah Segi Empat

Pertimbangkan senario di mana "tetingkap timbul" ditambahkan di atas dataran tentera laut. Secara intuitif, seseorang menjangkakan petak itu tersembunyi sepenuhnya di bawah tetingkap timbul. Namun, apabila kelegapan petak ditetapkan di bawah 1 (cth., 0.3), sebahagian petak itu kekal kelihatan di bawah tetingkap timbul.

Merungkai Misteri

Tingkah laku ini bukan pepijat tetapi pilihan reka bentuk yang disengajakan oleh pelayar web. Mengikut modul warna CSS, elemen dengan kelegapan kurang daripada 1 mencipta konteks tindanan baharu. Akibatnya, unsur-unsur di luar konteks ini tidak boleh dilapisi di dalamnya, tanpa mengira nilai indeks-znya.

Konteks Penimbunan Senyap

Secara lalai, elemen tidak diposisikan dengan kelegapan kurang daripada 1 dianggap seolah-olah mereka mempunyai 'z-index: 0' dan 'opacity: 1'. Ini bermakna bahawa mereka akan sentiasa dipaparkan pada susunan tindanan yang sama seolah-olah mereka berada di bahagian bawah konteks tindanan induk mereka, tanpa mengira nilai indeks z sebenar mereka.

Menyelesaikan Konflik

Untuk membetulkan tingkah laku ini, seseorang hanya boleh mengelak daripada menggunakan nilai kelegapan di bawah 1 untuk elemen yang sepatutnya disembunyikan sepenuhnya. Sebagai alternatif, dengan meletakkan elemen dengan kelegapan kurang daripada 1 menggunakan sifat CSS seperti 'kedudukan: mutlak' atau 'kedudukan: tetap', susunan tindanan yang diingini boleh dicapai, kerana sifat 'z-index' kemudiannya akan mengawal susunan tindanan dalam konteks tindanan baharu yang dicipta oleh kelegapan.

Atas ialah kandungan terperinci Opacity lwn. Z-Index: Mengapa Z-Index Tidak Sentiasa Berfungsi dengan Elemen Separuh Lutsinar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!