Dupi anjeun kantos nyetél z-indéks: 99999 dina unsur dina CSS Anjeun, na teu kaluar dina luhureun elemen séjén? A nilai nu badag kedah gampang nempatkeun unsur nu visually on luhureun nanaon sejenna, asumsina sakabeh elemen béda diatur boh mangrupa nilai handap atanapi henteu diatur pisan. Kaca wéb biasana digambarkeun dina rohangan dua diménsi; kumaha oge, ku nerapkeun sipat CSS husus, hiji pesawat z-sumbu imajinér diwanohkeun pikeun nepikeun jero. Pesawat ieu jejeg layar, sareng ti éta, pangguna ningali urutan elemen, hiji di luhur anu sanés. Gagasan balik sumbu-z imajinér, persepsi pamaké ngeunaan elemen tumpuk, nyaéta yén sipat CSS nu nyieun eta ngagabungkeun pikeun ngabentuk naon urang nelepon konteks stacking. Urang bakal ngobrol ngeunaan kumaha elemen "tumpuk" dina halaman wéb, naon anu ngatur susunan tumpukan, sareng pendekatan praktis pikeun "unstack" elemen nalika diperyogikeun. Ngeunaan Stacking Konteks Bayangkeun halaman wéb anjeun salaku méja. Nalika anjeun nambihan elemen HTML, anjeun nempatkeun potongan kertas, hiji-hiji, dina méja. Sapotong kertas panungtungan disimpen sarua jeung elemen HTML panganyarna ditambahkeun, sarta eta sits on luhureun sakabeh kertas sejenna disimpen saméméh éta. Ieu aliran dokumén normal, sanajan keur elemen nested. Méja sorangan ngagambarkeun konteks root stacking, dibentuk ku elemen , nu ngandung sakabéh polder séjén. Ayeuna, sipat CSS husus datang kana antrian. Sipat kawas posisi (kalawan z-indéks), opacity, transformasi, sarta ngandung) meta kawas polder. Folder ieu nyandak hiji unsur sareng sadaya murangkalihna, ékstrak tina tumpukan utama, sareng ngagolongkeun kana sub-tumpukan anu misah, nyiptakeun naon anu urang sebut kontéks tumpukan. Pikeun elemen diposisikan, ieu kajadian nalika urang dibewarakeun nilai z-indéks lian ti otomatis. Pikeun sipat sapertos opacity, transformasi, sareng saringan, kontéks tumpukan didamel sacara otomatis nalika nilai khusus diterapkeun.
Coba ngartos ieu: Sakali sapotong kertas (nyaéta, unsur anak) aya di jero polder (nyaéta, kontéks tumpukan kolot), éta moal pernah kaluar tina folder éta atanapi disimpen di antara kertas dina folder anu béda. Z-indéks na ayeuna ngan ukur relevan dina folder sorangan.
Dina ilustrasi di handap, Paper B ayeuna aya dina kontéks tumpukan Polder B, sareng ngan ukur tiasa dipesen sareng kertas sanés dina polder.
Bayangkeun, upami anjeun hoyong, anjeun gaduh dua polder dina méja anjeun:
.folder-a {z-indéks: 1; } .folder-b {z-indéks: 2; }
Hayu urang ngamutahirkeun markup saeutik. Jero Polder A mangrupa kaca husus, z-indéks: 9999. Jero Polder B mangrupa kaca polos, z-indéks: 5.
.kaca husus {z-indéks: 9999; } .polos-kaca {z-indéks: 5; }
Kaca nu mana di luhur? Ieu teh .polos-kaca di Polder B. browser nu ignores tulak anak jeung tumpukan dua polder kahiji. Ieu nilik Polder B (z-indéks: 2) jeung nempatkeun eta dina luhureun Polder A (z-indéks: 1) sabab urang terang yen dua leuwih gede ti hiji. Samentara éta, .special-kaca disetel ka z-indéks: 9999 kaca di handapeun tumpukan sanajan z-indéks na disetel ka nilai pangluhurna mungkin. Kontéks tumpukan ogé tiasa disarangkeun (polder di jero polder), nyiptakeun "tangkal kulawarga." Prinsip anu sami manglaku: murangkalih moal pernah luput tina folder kolotna. Ayeuna anjeun terang kumaha tumpukan konteks kalakuanana sapertos polder anu ngagolongkeun sareng nyusun ulang lapisan, éta patut ditaroskeun: naha sipat-sipat anu tangtu - sapertos transformasi sareng opacity - nyiptakeun kontéks tumpukan énggal? Ieu hal: sipat ieu teu nyieun stacking konteks kusabab kumaha maranéhanana kasampak; maranehna ngalakukeun eta kusabab kumaha browser jalan handapeun tiung. Nalika anjeun nerapkeun transformasi, opacity, saringan, atanapi sudut pandang, anjeun nyarios ka browser, "Eh, unsur ieu tiasa ngalih, muter, atanapi luntur, janten siap-siap!"
Nalika anjeun nganggo sipat ieu, browser nyiptakeun kontéks tumpukan énggal pikeun ngatur rendering langkung éfisién. Hal ieu ngamungkinkeun browser pikeun nanganan animasi, transformasi, sareng épék visual sacara mandiri, ngirangan kabutuhan ngitung deui kumaha elemen ieu berinteraksi sareng halaman anu sanés. Pikirkeun éta salaku browser anu nyarios, "Kuring bakal nanganan folder ieu nyalira ku kituna kuring henteu kedah ngarombak sadaya méja unggal waktos aya anu aya di jerona robih." Tapi ayaéfék samping. Sakali browser ngangkat unsur kana lapisan sorangan, éta kedah "rarata" sadayana di jerona, nyiptakeun kontéks tumpukan énggal. Ieu kawas nyokot polder kaluar meja pikeun nanganan eta misah; Sadayana di jero folder éta dikelompokkeun, sareng browser ayeuna ngarawat éta salaku unit tunggal nalika mutuskeun naon anu aya di luhur. Janten sanaos sipat transformasi sareng opacity sigana henteu mangaruhan cara tumpukan elemen sacara visual, aranjeunna ngalakukeun, sareng éta pikeun optimasi kinerja. Sababaraha sipat CSS séjén ogé bisa nyieun konteks stacking alesan sarupa. MDN nyayogikeun daptar lengkep upami anjeun hoyong ngagali langkung jero. Aya rada sababaraha, nu ukur illustrates kumaha gampang éta inadvertently nyieun konteks stacking tanpa nyaho eta. Masalah "Unstacking". Masalah tumpukan tiasa timbul pikeun seueur alesan, tapi sababaraha langkung umum tibatan anu sanés. Komponén modal mangrupikeun pola klasik sabab ngabutuhkeun togél komponén pikeun "muka" dina lapisan luhur luhureun sadaya elemen sanés, teras cabut tina lapisan luhur nalika "ditutup". Abdi cukup yakin yén sakabéh urang geus ngajalankeun kana kaayaan dimana urang muka modal jeung, pikeun alesan naon, teu muncul. Henteu yén éta henteu dibuka leres, tapi éta henteu katingali dina lapisan handap tina kontéks tumpukan. Ieu nyababkeun anjeun heran "kumaha carana?" saprak anjeun nyetél:
.overlay { posisi: maneuh; /* nyiptakeun kontéks tumpukan */ z-indéks: 1; /* nempatkeun unsur dina lapisan luhureun sagalana sejenna */ asup: 0; rubak: 100%; jangkungna: 100vh; ngalembur: nyumput; tukang-warna: # 00000080; }
Ieu katingalina leres, tapi upami unsur indungna anu ngandung pemicu modal mangrupikeun unsur anak dina unsur indung anu sanés ogé disetél ka z-indéks: 1, éta sacara teknis nempatkeun modal dina sublayer anu kabur ku polder utama. Hayu urang tingali éta skenario husus sarta sababaraha pitfalls tumpukan-konteks umum lianna. Jigana anjeun bakal nempo teu ngan kumaha gampang éta inadvertently nyieun konteks tumpukan, tapi ogé kumaha mismanage aranjeunna. Ogé, kumaha anjeun uih deui ka kaayaan anu diurus gumantung kana kaayaan. Skénario 1: Modal anu Terperangkap
Anjeun tiasa langsung ningali modal anjeun kajebak dina lapisan tingkat rendah sareng ngaidentipikasi indungna. Ekstensi browser Pangembang pinter parantos ngawangun ekstensi pikeun ngabantosan. Alat sapertos "CSS Stacking Context Inspector" extension Chrome nambihan tab z-indéks tambahan kana DevTools anjeun pikeun nunjukkeun inpormasi ngeunaan elemen anu nyiptakeun kontéks tumpukan.
IDE ekstensi Anjeun malah tiasa ningalikeun masalah nalika pamekaran nganggo ekstensi sapertos kieu pikeun Kode VS, anu nyorot masalah kontéks tumpukan poténsial langsung dina pangropéa anjeun.
Unstacking Jeung Regaining Control
Sanggeus kami geus ngaidentipikasi akar ngabalukarkeun, lengkah saterusna nyaeta nungkulan eta. Aya sababaraha pendekatan anu anjeun tiasa lakukeun pikeun ngarengsekeun masalah ieu, sareng kuring bakal daptar aranjeunna dina urutan. Anjeun tiasa milih saha waé dina tingkat naon waé, sanaos; teu aya anu tiasa ngawadul atanapi ngahalangan anu sanés.
Ngarobah Struktur HTML
Ieu dianggap fix optimal. Pikeun anjeun ngajalankeun kana masalah kontéks tumpukan, anjeun kedah nempatkeun sababaraha elemen dina posisi lucu dina HTML anjeun. Restructuring kaca bakal nulungan anjeun reshape DOM tur ngaleungitkeun masalah konteks stacking. Manggihan unsur masalah jeung cabut tina unsur trapping dina markup HTML. Contona, urang bisa ngajawab skenario kahiji, "The Trapped Modal," ku cara mindahkeun .modal-wadah kaluar tina lulugu jeung nempatkeun eta dina
Ieu eusi boga z-indéks 2 sarta tetep moal nutupan modal.Lugu
Eusi Utama
Nalika anjeun ngaklik tombol "Buka Modal", modalna diposisikan di payuneun sadayana sapertos anu sakuduna. Ningali Skenario Pena 1: Modal anu Terperangkap (Solusi) [dicabang] ku Shoyombo Jibril Ayomide. Saluyukeun TheKolot Stacking Kontéks Dina CSS Kumaha lamun unsur hiji anjeun moal bisa mindahkeun tanpa megatkeun perenah nu? Éta langkung saé pikeun ngabéréskeun masalah: indungna netepkeun kontéksna. Manggihan sipat CSS (atawa sipat) jawab triggering konteks jeung cabut eta. Lamun boga tujuan jeung teu bisa dihapus, masihan kolotna nilai z-indéks luhur batan elemen sibling na pikeun ngangkat sakabéh wadahna. Kalawan nilai z-indéks luhur, wadah indungna pindah ka luhur, sarta barudak na némbongan ngadeukeutan ka pamaké. Dumasar naon urang diajar di "The Submerged Dropdown" skenario, urang teu bisa mindahkeun dropdown kaluar tina navbar nu; éta moal asup akal. Najan kitu, urang bisa ningkatkeun nilai z-indéks wadahna .navbar jadi leuwih gede ti nilai z-indéks unsur .eusi. .navbar { tukang: # 333; /* z-indéks: 1; */ z-indéks: 3; posisi: relatif; }
Kalayan parobihan ieu, .dropdown-menu ayeuna muncul di payuneun eusi tanpa aya masalah.
Ningali Skenario Pen 2: The Submerged Dropdown (Solusi) [forked] ku Shoyombo Jibril Ayomide.
Coba Portals, Upami Ngagunakeun Framework
Dina kerangka sapertos React atanapi Vue, Portal mangrupikeun fitur anu ngamungkinkeun anjeun ngajantenkeun komponén di luar hierarki indungna normal dina DOM. Portal sapertos alat teleportasi pikeun komponén anjeun. Aranjeunna ngantepkeun anjeun ngadamel HTML komponén di mana waé dina dokumen éta (biasana langsung kana document.body) bari tetep logis nyambung ka indungna asli pikeun prop, kaayaan, sareng acara. Ieu sampurna pikeun lolos stacking bubu konteks saprak kaluaran rendered sacara harfiah muncul di luar wadah indungna masalah.
ReactDOM.createPortal(
Ieu ensures eusi dropdown anjeun teu disumputkeun tukangeun indungna, sanajan indungna boga mudal: disumputkeun atawa handap z-indéks. Dina skenario "The Clipped Tooltip" urang nempo saméméhna, Kuring dipaké Portal pikeun nyalametkeun tooltip ti mudal: klip disumputkeun ku cara nempatkeun eta dina awak dokumen jeung posisi eta luhureun pemicu dina wadahna. Tempo Skenario Pen 3: The Clipped Tooltip (Solusi) [forked] ku Shoyombo Jibril Ayomide. Ngenalkeun Konteks Tumpukan Tanpa Balukar Samping Sadaya pendekatan anu dijelaskeun dina bagian sateuacana ditujukeun pikeun "unstacking" elemen tina konteks tumpukan masalah, tapi aya sababaraha kaayaan dimana anjeun leres-leres peryogi atanapi hoyong nyiptakeun kontéks tumpukan. Nyiptakeun kontéks tumpukan énggal gampang, tapi sadayana pendekatan gaduh efek samping. Hartina, iwal ti ngagunakeun isolasi: isolasi. Nalika dilarapkeun kana unsur, kontéks tumpukan barudak unsur éta ditangtukeun relatif ka unggal anak sareng dina kontéks éta, tinimbang dipangaruhan ku unsur-unsur di luar éta. Conto klasik nyaéta nangtukeun unsur éta nilai négatip, sapertos z-indéks: -1. Ngabayangkeun anjeun gaduh komponén .kartu. Anjeun hoyong tambahkeun bentuk hiasan anu aya di tukangeun téks .kartu, tapi dina luhureun latar tukang kartu. Tanpa konteks stacking dina kartu, z-indéks: -1 ngirimkeun bentuk ka handap konteks root stacking (sakabéh kaca). Hal ieu ngajadikeun eta ngaleungit balik tukang bodas .card urang: Tempo Pen Négatip z-indéks (masalah) [forked] ku Shoyombo Jibril Ayomide. Pikeun ngajawab ieu, urang dibewarakeun isolasi: ngasingkeun on .card indungna: Tempo Pen Négatip z-indéks (solusi) [forked] ku Shoyombo Jibril Ayomide. Ayeuna, unsur .kartu sorangan jadi konteks stacking. Nalika unsur anak na - bentuk hiasan dijieun dina: saméméh pseudo-elemen - boga z-indéks: -1, eta mana ka handap pisan konteks stacking indungna urang. Tempatna sampurna di tukangeun téks sareng di luhur latar tukang kartu, sakumaha anu dimaksud. kacindekan Inget: waktos salajengna z-indéks Anjeun sigana kaluar kontrol, éta konteks stacking trapped. Rujukan
Kontéks tumpukan (MDN) Z-indéks sareng kontéks tumpukan (web.dev) "Kumaha Cara Nyiptakeun Kontéks Stacking Anyar sareng Harta Isolasi dina CSS", Natalie Pina "Naon The Heck, z-indéks ??", Josh Comeau
Bacaan Salajengna Dina SmashingMag
"Ngatur CSS Z-Indéks Dina Proyék ageung", Steven Frieson "Lulunduk Lengket Sareng Unsur Jangkungna: Kombinasi Tricky", Philip Braunen "Ngatur Z-Index Dina Aplikasi Wéb Berbasis Komponen", Pavel Pomerantsev "The Z-Index CSS Harta: A katingal komprehensif", Louis Lazaris
