Pernahkah anda menetapkan z-index: 99999 pada elemen dalam CSS anda, dan ia tidak muncul di atas elemen lain? Nilai yang besar harus dengan mudah meletakkan elemen itu secara visual di atas perkara lain, dengan mengandaikan semua elemen berbeza ditetapkan sama ada pada nilai yang lebih rendah atau tidak ditetapkan sama sekali. Halaman web biasanya diwakili dalam ruang dua dimensi; namun, dengan menggunakan sifat CSS tertentu, satah paksi z khayalan diperkenalkan untuk menyampaikan kedalaman. Satah ini berserenjang dengan skrin, dan daripadanya, pengguna melihat susunan unsur, satu di atas yang lain. Idea di sebalik paksi z khayalan, persepsi pengguna terhadap elemen bertindan, ialah sifat CSS yang menciptanya bergabung untuk membentuk apa yang kita panggil konteks susun. Kami akan bercakap tentang cara elemen "disusun" pada halaman web, perkara yang mengawal susunan susun dan pendekatan praktikal untuk "menyahtindan" elemen apabila diperlukan. Perihal Menyusun Konteks Bayangkan halaman web anda sebagai meja. Semasa anda menambah elemen HTML, anda meletakkan kepingan kertas, satu demi satu, di atas meja. Sekeping kertas terakhir yang diletakkan adalah bersamaan dengan elemen HTML yang paling baru ditambah, dan ia terletak di atas semua kertas lain yang diletakkan di hadapannya. Ini ialah aliran dokumen biasa, walaupun untuk elemen bersarang. Meja itu sendiri mewakili konteks susunan akar, yang dibentuk oleh elemen , yang mengandungi semua folder lain. Kini, sifat CSS tertentu mula dimainkan. Sifat seperti kedudukan (dengan indeks-z), kelegapan, transformasi dan mengandungi) bertindak seperti folder. Folder ini mengambil elemen dan semua anak-anaknya, mengekstraknya daripada tindanan utama dan mengumpulkannya ke dalam sub-tindanan yang berasingan, mencipta apa yang kita panggil konteks tindanan. Untuk elemen diposisikan, ini berlaku apabila kami mengisytiharkan nilai indeks-z selain daripada auto. Untuk sifat seperti kelegapan, transformasi dan penapis, konteks tindanan dibuat secara automatik apabila nilai tertentu digunakan.
Cuba fahami perkara ini: Setelah sekeping kertas (iaitu, elemen kanak-kanak) berada di dalam folder (iaitu, konteks tindanan ibu bapa), ia tidak boleh keluar dari folder itu atau diletakkan di antara kertas dalam folder lain. Z-indexnya kini hanya relevan di dalam foldernya sendiri.
Dalam ilustrasi di bawah, Kertas B kini berada dalam konteks tindanan Folder B dan hanya boleh dipesan dengan kertas lain dalam folder.
Bayangkan, jika anda mahu, anda mempunyai dua folder di atas meja anda:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Mari kemas kini markup sedikit. Dalam Folder A ialah halaman khas, z-index: 9999. Dalam Folder B ialah halaman biasa, z-index: 5.
.halaman-khas { z-index: 9999; } .halaman biasa { z-index: 5; }
Halaman manakah di atas? Ia adalah .plain-page dalam Folder B. Penyemak imbas mengabaikan kertas kanak-kanak dan menyusun dua folder terlebih dahulu. Ia melihat Folder B (indeks-z: 2) dan meletakkannya di atas Folder A (indeks-z: 1) kerana kita tahu bahawa dua lebih besar daripada satu. Sementara itu, halaman .special-page ditetapkan kepada z-index: 9999 halaman berada di bahagian bawah tindanan walaupun z-indexnya ditetapkan kepada nilai tertinggi yang mungkin. Konteks tindanan juga boleh bersarang (folder di dalam folder), mencipta "pokok keluarga." Prinsip yang sama terpakai: kanak-kanak tidak boleh lari dari folder ibu bapanya. Kini setelah anda mengetahui cara konteks tindanan berkelakuan seperti folder yang mengumpulkan dan menyusun semula lapisan, anda patut bertanya: mengapa sifat tertentu — seperti perubahan dan kelegapan — mencipta konteks tindanan baharu? Inilah perkaranya: sifat ini tidak mencipta konteks tindanan kerana penampilannya; mereka melakukannya kerana cara pelayar berfungsi di bawah hud. Apabila anda menggunakan perubahan, kelegapan, penapis atau perspektif, anda memberitahu penyemak imbas, "Hei, elemen ini mungkin bergerak, berputar atau pudar, jadi bersedialah!"
Apabila anda menggunakan sifat ini, penyemak imbas mencipta konteks tindanan baharu untuk mengurus pemaparan dengan lebih cekap. Ini membolehkan penyemak imbas mengendalikan animasi, perubahan dan kesan visual secara bebas, mengurangkan keperluan untuk mengira semula cara elemen ini berinteraksi dengan seluruh halaman. Anggap ia sebagai penyemak imbas berkata, "Saya akan mengendalikan folder ini secara berasingan supaya saya tidak perlu merombak keseluruhan meja setiap kali sesuatu di dalamnya berubah." Tetapi adakesan sampingan. Sebaik sahaja penyemak imbas mengangkat elemen ke dalam lapisannya sendiri, ia mesti "meratakan" segala-galanya di dalamnya, mewujudkan konteks tindanan baharu. Ia seperti mengambil folder dari meja untuk mengendalikannya secara berasingan; segala-galanya di dalam folder itu akan dikumpulkan, dan penyemak imbas kini menganggapnya sebagai satu unit apabila memutuskan perkara yang berada di atas apa. Jadi, walaupun sifat ubah dan kelegapan mungkin tidak menjejaskan cara elemen disusun secara visual, ia berlaku dan ia adalah untuk pengoptimuman prestasi. Beberapa sifat CSS lain juga boleh mencipta konteks tindanan atas sebab yang sama. MDN menyediakan senarai lengkap jika anda ingin menggali lebih dalam. Terdapat beberapa, yang hanya menggambarkan betapa mudahnya untuk secara tidak sengaja mencipta konteks susun tanpa mengetahuinya. Masalah "Membuang Susun". Isu susun boleh timbul atas pelbagai sebab, tetapi sesetengahnya lebih biasa daripada yang lain. Komponen modal ialah corak klasik kerana ia memerlukan togol komponen untuk "membuka" pada lapisan atas di atas semua elemen lain, kemudian mengalih keluarnya dari lapisan atas apabila ia "ditutup". Saya cukup yakin bahawa kita semua telah menghadapi situasi di mana kita membuka modal dan, atas sebab apa pun, ia tidak muncul. Bukannya ia tidak dibuka dengan betul, tetapi ia tidak dapat dilihat dalam lapisan bawah konteks tindanan. Ini membuatkan anda tertanya-tanya "bagaimana boleh?" sejak anda menetapkan:
.overlay { kedudukan: tetap; /* mencipta konteks susun */ indeks-z: 1; /* meletakkan elemen pada lapisan di atas segala-galanya */ sisipan: 0; lebar: 100%; ketinggian: 100vh; limpahan: tersembunyi; warna latar belakang: #00000080; }
Ini kelihatan betul, tetapi jika elemen induk yang mengandungi pencetus modal ialah elemen anak dalam elemen induk lain yang turut ditetapkan kepada indeks-z: 1, yang secara teknikal meletakkan modal dalam sublapisan yang dikaburkan oleh folder utama. Mari kita lihat senario khusus itu dan beberapa perangkap konteks tindanan biasa yang lain. Saya fikir anda akan melihat bukan sahaja betapa mudahnya untuk mencipta konteks tindanan secara tidak sengaja, tetapi juga cara untuk salah mengurusnya. Selain itu, cara anda kembali ke keadaan terurus bergantung pada keadaan. Senario 1: Modal Terperangkap
Anda boleh segera melihat modal anda terperangkap dalam lapisan peringkat rendah dan mengenal pasti induknya. Sambungan Penyemak Imbas Pembangun pintar telah membina sambungan untuk membantu. Alat seperti "Pemeriksa Konteks Penimbunan CSS" sambungan Chrome ini menambah tab indeks-z tambahan pada DevTools anda untuk menunjukkan kepada anda maklumat tentang elemen yang mencipta konteks tindanan.
Sambungan IDE Anda juga boleh melihat isu semasa pembangunan dengan sambungan seperti ini untuk Kod VS, yang menyerlahkan potensi isu konteks tindanan terus dalam editor anda.
Nyahtindan Dan Mendapatkan Semula Kawalan Selepas kami mengenal pasti punca utama, langkah seterusnya ialah menanganinya. Terdapat beberapa pendekatan yang boleh anda ambil untuk menangani masalah ini, dan saya akan menyenaraikannya mengikut urutan. Anda boleh memilih sesiapa sahaja di mana-mana peringkat, walaupun; tiada siapa boleh mengadu atau menghalang orang lain. Tukar Struktur HTML Ini dianggap pembetulan yang optimum. Untuk anda menghadapi isu konteks susun, anda mesti meletakkan beberapa elemen dalam kedudukan lucu dalam HTML anda. Penstrukturan semula halaman akan membantu anda membentuk semula DOM dan menghapuskan masalah konteks tindanan. Cari elemen bermasalah dan keluarkan ia daripada elemen perangkap dalam penanda HTML. Sebagai contoh, kita boleh menyelesaikan senario pertama, "Modal Terperangkap," dengan mengalihkan bekas .modal keluar dari pengepala dan meletakkannya dalam elemen
dengan sendirinya.Kandungan ini mempunyai indeks-z 2 dan masih tidak akan meliputi modal.Pengepala
Kandungan Utama
Apabila anda mengklik butang "Modal Terbuka", modal diletakkan di hadapan segala-galanya seperti yang sepatutnya. Lihat Senario Pen 1: Modal Terperangkap (Penyelesaian) [dicabang] oleh Shoyombo Gabriel Ayomide. LaraskanKonteks Susun Ibu Bapa Dalam CSS Bagaimana jika elemen itu adalah satu yang anda tidak boleh bergerak tanpa melanggar reka letak? Adalah lebih baik untuk menangani isu ini: ibu bapa menetapkan konteks. Cari sifat CSS (atau sifat) yang bertanggungjawab untuk mencetuskan konteks dan alih keluarnya. Jika ia mempunyai tujuan dan tidak boleh dialih keluar, berikan induk nilai indeks z yang lebih tinggi daripada elemen adik-beradiknya untuk mengangkat keseluruhan bekas. Dengan nilai indeks-z yang lebih tinggi, bekas induk bergerak ke atas dan anak-anaknya kelihatan lebih dekat dengan pengguna. Berdasarkan apa yang kami pelajari dalam senario "The Submerged Dropdown", kami tidak boleh mengalihkan dropdown keluar daripada navbar; ia tidak akan masuk akal. Walau bagaimanapun, kita boleh meningkatkan nilai indeks z bekas .navbar menjadi lebih besar daripada nilai indeks z elemen .content. .navbar { latar belakang: #333; /* z-indeks: 1; */ indeks z: 3; kedudukan: relatif; }
Dengan perubahan ini, menu .dropdown kini muncul di hadapan kandungan tanpa sebarang isu.
Lihat Senario Pen 2: Jatuh Terendam (Penyelesaian) [bercabang] oleh Shoyombo Gabriel Ayomide.
Cuba Portal, Jika Menggunakan Rangka Kerja
Dalam rangka kerja seperti React atau Vue, Portal ialah ciri yang membolehkan anda memaparkan komponen di luar hierarki induk biasanya dalam DOM. Portal adalah seperti peranti teleportasi untuk komponen anda. Mereka membenarkan anda memaparkan HTML komponen di mana-mana dalam dokumen (biasanya terus ke document.body) sambil memastikan ia disambungkan secara logik kepada induk asalnya untuk prop, keadaan dan acara. Ini sesuai untuk melarikan diri daripada perangkap konteks tindanan kerana output yang diberikan benar-benar muncul di luar bekas induk yang bermasalah.
ReactDOM.createPortal(
Ini memastikan kandungan lungsur turun anda tidak tersembunyi di sebalik induknya, walaupun induk itu mempunyai limpahan: tersembunyi atau indeks z yang lebih rendah. Dalam senario "Petua Alat Terpotong" yang kami lihat sebelum ini, saya menggunakan Portal untuk menyelamatkan petua alat daripada limpahan: klip tersembunyi dengan meletakkannya dalam badan dokumen dan meletakkannya di atas picu dalam bekas. Lihat Senario Pen 3: Petua Alat Terpotong (Penyelesaian) [bercabang] oleh Shoyombo Gabriel Ayomide. Memperkenalkan Konteks Susun Tanpa Kesan Sampingan Semua pendekatan yang dijelaskan dalam bahagian sebelumnya bertujuan untuk "menyahtindan" elemen daripada konteks tindanan yang bermasalah, tetapi terdapat beberapa situasi di mana anda sebenarnya memerlukan atau ingin mencipta konteks tindanan. Mewujudkan konteks tindanan baharu adalah mudah, tetapi semua pendekatan datang dengan kesan sampingan. Iaitu, kecuali untuk menggunakan pengasingan: mengasingkan. Apabila digunakan pada elemen, konteks tindanan kanak-kanak elemen itu ditentukan secara relatif kepada setiap kanak-kanak dan dalam konteks itu, dan bukannya dipengaruhi oleh unsur-unsur di luar elemen itu. Contoh klasik ialah memberikan elemen itu nilai negatif, seperti z-index: -1. Bayangkan anda mempunyai komponen .card. Anda ingin menambah bentuk hiasan yang terletak di belakang teks .card, tetapi di atas latar belakang kad. Tanpa konteks tindanan pada kad, z-index: -1 menghantar bentuk ke bahagian bawah konteks susun akar (seluruh halaman). Ini menjadikannya hilang di belakang latar belakang putih .card: Lihat indeks z Pen Negatif (masalah) [bercabang] oleh Shoyombo Gabriel Ayomide. Untuk menyelesaikannya, kami mengisytiharkan pengasingan: asingkan pada .card induk: Lihat Pen Negatif z-indeks (penyelesaian) [bercabang] oleh Shoyombo Gabriel Ayomide. Kini, elemen .card itu sendiri menjadi konteks tindanan. Apabila elemen anaknya — bentuk hiasan yang dicipta pada :before pseudo-element — mempunyai indeks-z: -1, ia pergi ke bahagian paling bawah konteks susun induk. Ia terletak betul-betul di belakang teks dan di atas latar belakang kad, seperti yang dimaksudkan. Kesimpulan Ingat: apabila indeks z anda kelihatan di luar kawalan, ini adalah konteks tindanan yang terperangkap. Rujukan
Konteks tindanan (MDN) Indeks Z dan konteks tindanan (web.dev) "Cara Mencipta Konteks Susunan Baharu dengan Harta Pengasingan dalam CSS", Natalie Pina "What The Heck, z-index??", Josh Comeau
Bacaan Lanjut Mengenai SmashingMag
"Menguruskan CSS Z-Index Dalam Projek Besar", Steven Frieson "Tajuk Melekit Dan Elemen Ketinggian Penuh: Gabungan Rumit", Philip Braunen "Mengurus Indeks Z Dalam Aplikasi Web Berasaskan Komponen", Pavel Pomerantsev "Harta CSS Indeks Z: Pandangan Komprehensif", Louis Lazaris
