Apa sampeyan tau nyetel z-index: 99999 ing unsur ing CSS, lan ora metu ing ndhuwur unsur liyane? Nilai sing gedhe kudu gampang nempatake unsur kasebut kanthi visual ing ndhuwur apa wae, yen kabeh unsur sing beda-beda disetel ing nilai sing luwih murah utawa ora disetel. Kaca web biasane diwakili ing ruang rong dimensi; Nanging, kanthi nggunakake sifat CSS tartamtu, bidang z-sumbu khayalan dienal kanggo ngirim ambane. Bidang iki jejeg layar, lan saka iku, pangguna ngerteni urutan unsur, siji ing ndhuwur liyane. Gagasan ing mburi sumbu z khayalan, persepsi pangguna babagan unsur-unsur sing ditumpuk, yaiku properti CSS sing nggawe gabung dadi apa sing diarani konteks tumpukan. Kita bakal ngomong babagan carane unsur "ditumpuk" ing kaca web, apa sing ngontrol urutan tumpukan, lan pendekatan praktis kanggo "mbusak tumpukan" unsur nalika dibutuhake. Babagan Numpuk Konteks Bayangake kaca web sampeyan minangka meja. Nalika sampeyan nambahake unsur HTML, sampeyan lagi nyelehake potongan kertas, siji-sijine, ing meja. Potongan kertas pungkasan sing diselehake padha karo unsur HTML sing paling anyar ditambahake, lan dumunung ing ndhuwur kabeh kertas liyane sing diselehake sadurunge. Iki minangka aliran dokumen normal, sanajan kanggo unsur bersarang. Meja kasebut dhewe nggambarake konteks tumpukan root, sing dibentuk dening unsur , sing ngemot kabeh folder liyane. Saiki, properti CSS tartamtu bakal diputer. Properti kaya posisi (kanthi indeks-z), opacity, transformasi, lan ngemot) tumindak kaya folder. Folder iki njupuk unsur lan kabeh anak-anake, ngekstrak saka tumpukan utama, lan dikelompokake dadi sub-tumpukan sing kapisah, nggawe apa sing diarani konteks tumpukan. Kanggo unsur sing dipanggonke, iki kedadeyan nalika kita ngumumake nilai indeks z liyane saka otomatis. Kanggo properti kaya opacity, transform, lan filter, konteks tumpukan digawe kanthi otomatis nalika nilai tartamtu ditrapake.
Coba mangertos iki: Sawise Piece saka kertas (i.e., unsur anak) nang folder (i.e., konteks tumpukan wong tuwa), ora bisa metu saka folder kasebut utawa diselehake ing antarane kertas ing folder sing beda. Z-index saiki mung relevan ing folder dhewe.
Ing ilustrasi ing ngisor iki, Kertas B saiki ana ing konteks tumpukan Folder B, lan mung bisa dipesen karo kertas liyane ing folder kasebut.
Mbayangno, yen sampeyan pengin, sampeyan duwe rong folder ing meja sampeyan:
.folder-a {z-index: 1; } .folder-b {z-indeks: 2; }
Ayo nganyari markup rada. Ing Folder A minangka kaca khusus, indeks z: 9999. Ing Folder B minangka kaca kosong, indeks z: 5.
.kaca khusus {z-index: 9999; } .kaca polos {z-index: 5; }
Kaca endi sing ana ing ndhuwur? Iku .plain-page ing Folder B. Browser nglirwakake kertas anak lan tumpukan loro folder pisanan. Iku ndeleng Folder B (z-indeks: 2) lan sijine ing ndhuwur Folder A (z-indeks: 1) amarga kita ngerti sing loro luwih saka siji. Kangge, .khusus-kaca disetel kanggo z-indeks: 9999 kaca ing ngisor tumpukan sanajan sawijining z-indeks disetel kanggo nilai paling dhuwur. Konteks tumpukan uga bisa disarang (folder ing folder), nggawe "wit kulawarga." Prinsip sing padha ditrapake: bocah ora bisa uwal saka folder wong tuwane. Saiki sampeyan ngerti kepiye konteks tumpukan tumindak kaya folder sing nglumpukake lan nyusun ulang lapisan, mula kudu ditakoni: kenapa properti tartamtu - kaya transformasi lan opacity - nggawe konteks tumpukan anyar? Mangkene: properti kasebut ora nggawe konteks tumpukan amarga katon; padha nindakake iku amarga saka carane browser dianggo ing hood. Yen sampeyan nggunakake transformasi, opacity, filter, utawa perspektif, sampeyan bakal ngandhani browser, "Eh, unsur iki bisa mindhah, muter, utawa luntur, mula siyap!"
Nalika sampeyan nggunakake properti kasebut, browser nggawe konteks tumpukan anyar kanggo ngatur rendering kanthi luwih efisien. Iki ngidini browser bisa nangani animasi, transformasi, lan efek visual kanthi mandiri, nyuda kabutuhan ngetung maneh carane unsur kasebut sesambungan karo kaca liyane. Coba pikirake kaya browser sing ujar, "Aku bakal nangani folder iki kanthi kapisah supaya aku ora kudu ngowahi kabeh meja saben ana owah-owahan ing njero." Nanging anaefek sisih. Sawise browser ngangkat unsur menyang lapisan dhewe, iku kudu "rata" kabeh ing, nggawe konteks tumpukan anyar. Iku kaya njupuk folder saka mejo kanggo nangani dhewe; kabeh ing folder kasebut diklompokake, lan browser saiki nganggep minangka unit siji nalika mutusake apa sing ana ing ndhuwur. Dadi, sanajan sifat transformasi lan opacity bisa uga ora mengaruhi cara tumpukan unsur visual, nanging uga kanggo optimasi kinerja. Sawetara properti CSS liyane uga bisa nggawe konteks tumpukan amarga alasan sing padha. MDN nyedhiyakake dhaptar lengkap yen sampeyan pengin nggali luwih jero. Ana sawetara, sing mung nggambarake carane gampang ora sengaja nggawe konteks numpuk tanpa ngerti. Masalah "Unstacking". Masalah tumpukan bisa muncul amarga akeh alasan, nanging sawetara luwih umum tinimbang liyane. Komponen modal minangka pola klasik amarga kudu ngowahi komponen kasebut dadi "mbukak" ing lapisan ndhuwur ing ndhuwur kabeh unsur liyane, banjur copot saka lapisan ndhuwur nalika "ditutup". Aku yakin banget yen kabeh kita wis ngalami kahanan sing mbukak modal lan, kanthi alesan apa wae, ora katon. Iku ora sing ora mbukak kanthi bener, nanging ora katon ing lapisan ngisor konteks tumpukan. Iki nggawe sampeyan mikir "kepiye?" wiwit sampeyan nyetel:
.overlay { posisi: tetep; /* nggawe konteks tumpukan */ indeks z: 1; /* nempatake unsur ing lapisan ndhuwur kabeh liyane */ inset: 0; jembaré: 100%; dhuwur: 100vh; kebanjiran : didhelikake; werna latar mburi: # 00000080; }
Iki katon bener, nanging yen unsur induk sing ngemot pemicu modal minangka unsur anak ing unsur induk liyane sing uga disetel menyang z-indeks: 1, sing sacara teknis nempatake modal kasebut ing sublayer sing ditutupi folder utama. Ayo dideleng ing skenario tartamtu lan sawetara pitfalls tumpukan-konteks umum liyane. Aku mikir sampeyan bakal weruh ora mung carane gampang iku ora sengaja nggawe konteks numpuk, nanging uga carane mismanage wong. Kajaba iku, kepiye sampeyan bali menyang negara sing dikelola gumantung saka kahanan kasebut. Skenario 1: Modal Kepepet
Sampeyan bisa langsung ndeleng modal sampeyan kepepet ing lapisan tingkat rendah lan ngenali wong tuwa. Ekstensi Browser Pangembang pinter wis nggawe ekstensi kanggo mbantu. Piranti kaya iki "CSS Stacking Context Inspector" Ekstensi Chrome nambah tab z-index ekstra menyang DevTools kanggo nuduhake informasi babagan unsur sing nggawe konteks tumpukan.
Ekstensi IDE Sampeyan bisa uga nemokake masalah sajrone pangembangan kanthi ekstensi kaya iki kanggo Kode VS, sing nyorot masalah konteks tumpukan potensial langsung ing editor sampeyan.
Unstacking Lan Regaining Control
Sawise kita nemtokake sababe, langkah sabanjure yaiku kanggo ngatasi. Ana sawetara pendekatan sing bisa ditindakake kanggo ngatasi masalah iki, lan aku bakal menehi dhaptar kanthi urut. Sampeyan bisa milih sapa wae ing tingkat apa wae, sanadyan; ora ana sing bisa sambat utawa ngalang-alangi wong liya.
Ngganti Struktur HTML
Iki dianggep minangka fix optimal. Supaya sampeyan bisa nemoni masalah konteks tumpukan, sampeyan kudu nyelehake sawetara unsur ing posisi lucu ing HTML sampeyan. Ngatur maneh kaca bakal mbantu sampeyan mbentuk maneh DOM lan ngilangi masalah konteks tumpukan. Temokake unsur masalah lan copot saka unsur trapping ing markup HTML. Kayata, kita bisa ngatasi skenario pisanan, "The Trapped Modal,"Kanthi mindhah .modal-wadhah metu saka header lan manggonake ing
Konten iki nduweni indeks z 2 lan isih ora bakal nutupi modal.Header
Konten Utama
Nalika sampeyan ngeklik tombol "Bukak Modal", modal kasebut dipanggonke ing ngarepe kabeh kaya sing dikarepake. Deleng Skenario Pena 1: Modal Terjebak (Solusi) [forked] dening Shoyombo Gabriel Ayomide. Nyetel TheKonteks Numpuk Induk Ing CSS Apa yen unsur iku salah siji sing ora bisa mindhah tanpa break tata? Iku luwih apik kanggo ngatasi masalah: wong tuwa netepake konteks. Temokake properti CSS (utawa properti) sing tanggung jawab kanggo micu konteks lan mbusak. Yen wis waé lan ora bisa dibusak, menehi tuwane Nilai z-indeks luwih saka unsur sedulur kanggo ngangkat kabeh wadhah. Kanthi nilai indeks z sing luwih dhuwur, wadhah induk pindhah menyang ndhuwur, lan anak-anake katon luwih cedhak karo pangguna. Adhedhasar apa sing kita sinau ing skenario "The Submerged Dropdown", kita ora bisa mindhah dropdown metu saka navbar; iku ora bakal nggawe raos. Nanging, kita bisa nambah nilai z-indeks wadhah .navbar dadi luwih saka nilai z-indeks unsur .isi. .navbar { latar mburi: # 333; /* indeks-z: 1; */ indeks z: 3; posisi: relatif; }
Kanthi owah-owahan iki, .dropdown-menu saiki katon ing ngarepe isi tanpa masalah.
Deleng Skenario Pena 2: The Submerged Dropdown (Solusi) [forked] dening Shoyombo Gabriel Ayomide.
Coba Portal, Yen Nggunakake Framework
Ing kerangka kaya React utawa Vue, Portal minangka fitur sing ngidini sampeyan nerjemahake komponen ing njaba hierarki induk normal ing DOM. Portal kaya piranti teleportasi kanggo komponen sampeyan. Padha ngidini sampeyan nerjemahake HTML komponen ing ngendi wae ing dokumen kasebut (biasane langsung menyang document.body) nalika tetep nyambung kanthi logis karo wong tuwa asli kanggo peraga, negara, lan acara. Iki sampurna kanggo uwal traps konteks numpuk wiwit output render secara harfiah katon ing njaba wadhah induk masalah.
ReactDOM.createPortal(
Iki njamin konten gulung mudhun sampeyan ora didhelikake ing mburi wong tuwa, sanajan wong tuwa wis kebanjiran: didhelikake utawa indeks z sing luwih murah. Ing skenario "The Clipped Tooltip" sing kita deleng sadurunge, aku nggunakake Portal kanggo ngluwari tooltip saka kebanjiran: klip sing didhelikake kanthi dilebokake ing awak dokumen lan posisi ing ndhuwur pemicu ing wadhah. Deleng Skenario Pena 3: Tooltip Clipped (Solusi) [forked] dening Shoyombo Gabriel Ayomide. Ngenalke Konteks Numpuk Tanpa Efek Samping Kabeh pendekatan sing diterangake ing bagean sadurunge ngarahake unsur "unstacking" saka konteks tumpukan masalah, nanging ana sawetara kahanan sing sampeyan butuh utawa pengin nggawe konteks tumpukan. Nggawe konteks tumpukan anyar gampang, nanging kabeh pendekatan duwe efek samping. Sing, kajaba nggunakake isolasi: isolasi. Nalika ditrapake ing sawijining unsur, konteks tumpukan anak unsur kasebut ditemtokake relatif marang saben bocah lan ing konteks kasebut, tinimbang dipengaruhi unsur ing njaba. Conto klasik yaiku menehi unsur kasebut kanthi nilai negatif, kayata indeks z: -1. Mbayangno sampeyan duwe komponen .kertu. Sampeyan pengin nambah wangun hiasan sing lenggah konco teks .kertu, nanging ing ndhuwur latar mburi kertu. Tanpa konteks numpuk ing kertu, z-indeks: -1 ngirim wangun menyang ngisor konteks numpuk ROOT (kabeh kaca). Iki ndadekake iku ilang konco latar mburi putih .card: Waca Pen Negatif z-indeks (masalah) [forked] dening Shoyombo Gabriel Ayomide. Kanggo ngatasi masalah iki, kita ngumumake isolasi: isolasi ing .card wong tuwa: Waca Pen Negatif z-indeks (solusi) [forked] dening Shoyombo Gabriel Ayomide. Saiki, unsur .kertu dhewe dadi konteks numpuk. Nalika unsur anak sawijining - wangun hiasan digawe ing: sadurunge pseudo-elemen - wis z-indeks: -1, iku pindhah menyang ngisor banget konteks tumpukan wong tuwa. Dumunung ing mburi teks lan ing ndhuwur latar mburi kertu, kaya sing dikarepake. Kesimpulan Elingi: sabanjure z-indeks sampeyan katon ora bisa dikontrol, iku konteks tumpukan sing kepepet. Referensi
Konteks tumpukan (MDN) Konteks indeks Z lan tumpukan (web.dev) "Carane Nggawe Konteks Numpuk Anyar karo Properti Isolasi ing CSS", Natalie Pina "Apa The Heck, z-indeks??", Josh Comeau
Wacan Luwih Ing SmashingMag
"Ngatur CSS Z-Indeks Ing Proyek Gedhe", Steven Frieson "Headers Sticky Lan Elemen Dhuwur Lengkap: Kombinasi Tricky", Philip Braunen "Ngatur Z-Index Ing Aplikasi Web Berbasis Komponen", Pavel Pomerantsev "Properti CSS Z-Index: Deleng Komprehensif", Louis Lazaris
