In This Article

Peu na neu peugot z-index: 99999 bak saboh elemen lam CSS droeneuh, dan hana jiteubiet di ateuh elemen laen? Nilai yeng rayek haroh deungen mudah ditempatkan elemen nyan seucara visual di ateuh yeng laen, deungen asumsi mandum elemen yeng meubeda ditetapkan bak nilai yeng lubeh miyup atau hana ditetapkan sama sekali. Saboh laman web biasajih geuwakili lam saboh ruweuëng dua dimensi; namun, deungon neuterapkan properti CSS tertentu, bidang sumbu z khayalan geupeuturi keu geupeusampoe kedalaman. Bidang nyoe tegak luroh ngon layeue, ngon nibak nyan, ureueng ngui geurasa urutan elemen, saboh di ateuh nyang laen. Pikeran di likot sumbu z khayalan, persepsi pengguna teuntang elemen nyang meutumpok, nakeuh bahwa properti CSS nyang peugot jih meugabong keu membentuk peu nyang tanyoe kheun konteks meutumpok. Tanyoe akan ta peugah haba kiban cara elemen-elemen “ditumpuk” bak saboh halaman web, peu nyang ngontrol urutan tumpukan, dan cara praktis untuk “buka tumpukan” elemen watee dipeureulee. Teuntang Konteks Peutumpok . Bayangkan webpage droeneuh lagee meja. Bak gata tamah elemen HTML, gata tapeuduek keureutah, saboh-saboh, ateuh meja. Keureutah nyang akhé geupeuduëk saban ngon elemen HTML nyang paléng barô geutamah, ngon elemen nyan geuduëk ateuëh mandum keureutah la'én nyang geupeuduëk di keuë jih. Nyoe keuh alur dokumen normal, bahkan keu elemen nyang bersarang. Meja nyan keudroe mewakili konteks root stacking, nyang geubentuk le elemen , nyang na mandum folder laen. Jinoe, properti CSS nyang spesifik teuka lam permainan. Properti lagee posisi (deungon indeks z), opacity, transformasi, ngon meuasoe) bertindak lagee folder. Folder nyoe jicok saboh elemen ngon mandum aneuk jih, ji ekstrak dari stack utama, dan ji kelompokkan jeut keu sub-stack nyang teupisah, jipeugot peu nyang tanyoe kheun konteks stacking. Untuk elemen nyang diposisikan, nyoe terjadi watee tanyoe ta deklarasikan nilai z-index selaen auto. Keu properti lagee opacity, transform, ngon filter, konteks tumpukan jipeugot seucara otomatis watee nilai-nilai tertentu jiterapkan.

Coba meuphom nyoe: Meunyoe saboh keureutah (yaitu, elemen aneuk) na lam saboh folder (yaitu, konteks tumpukan ureung chik), hana tom jeut jiteubiet dari folder nyan atawa jipeuduek di antara keureutah lam folder nyang beda. Indeks z jih jinoe hanya relevan lam folder droe jih.

Lam ilustrasi di miyup nyoe, Kertas B jinoe ka lam konteks stacking Folder B, dan hanya jeut dipeusan ngon kertas laen lam folder.

Bayangkan, meunyo droeneuh neutem, droeneuh na dua boh folder di ateuh meja droeneuh:

.map-a { z-indeks: 1; } .map-b { z-indeks: 2; }

Mari ta update markup nyan bacut. Lam Folder A na saboh halaman khusus, z-indeks: 9999. Lam Folder B na saboh halaman biasa, z-indeks: 5.

.khusus-halaman { z-indeks: 9999; } .halaman-biasa { z-indeks: 5; }

Laman pat nyang na di ateuh? Nyan .plain-page lam Folder B. Browser hana geutem peuduli keu kertas-kertas aneuk dan geutumpôk dua boh folder nyan dilee. Nyan deuh Folder B (z-indeks: 2) dan jipeuduek ateuh Folder A (z-indeks: 1) sabab tanyoe ta teupeu bahwa dua leubeh rayeuk nibak saboh. Seumentara nyan, .special-page nyang ka geuset keu z-index: 9999 halaman na di miyueb tumpukan bah pih z-index jih geuset keu nilai nyang paleng manyang. Konteks tumpukan pih jeut keu nested (folder lam folder), peugot “pohon keluarga.” Prinsip nyang saban pih berlaku: aneuk miet hana mungken jipeulheuh droe dari map ureung chik jih. Jinoe droeneuh ka neuteumeung kiban konteks tumpukan berperilaku lagee folder nyang mengelompokkan dan neuurut ulang lapisan, payah neutanyong: pakon properti-properti tertentu — lagee transform dan opacity — neupeugot konteks tumpukan baro? Nyoe keuh hai jih: properti-properti nyoe hana jipeugot konteks stacking kareuna kiban rupa jih; awaknyan jipeubuet sabab cara browser nyan meubut dimiyueb kap. Watee droeneuh neuterapkan transformasi, opacity, filter, atawa perspektif, droeneuh neupeugah bak browser, “Hei, elemen nyoe mungken meugrak, meuputa, atawa pudar, jadi beu siap-siap!”

Meunyo neungui properti-properti nyoe, browser jipeugot konteks stacking baroe keu neuatoe rendering leubeh efisien. Nyoë memungkénkan browser keu geutangani animasi, transformasi, ngon efek visual seucara independen, geupeukureuëng keubutuhan keu geuhitong lom pakriban elemen-elemen nyoe meuinteraksi ngon sisa laman. Pike keu browser nyang jipeugah, “Lon akan lon tangani folder nyoe secara meupisah sehingga lon hana payah lon ubah mandum meja tiep-tiep watee na nyang meu ubah lam jih.” Teuma na .saboh efek samping. Meunyo browser ka geu angkat saboh elemen u dalam lapisan droe geuh, browser nyan wajeb “geu rata” mandum nyang na lam nyan, geupeugot konteks stacking baro. Nyan lagee tacok folder dari meja untuk ta tangani secara meupisah; mandum lam folder nyan jeuet keu kelompok, dan browser jinoe jipeulaku seubagoe saboh unit watee ji putuskan peu nyang jiduek di ateuh peu. Jadi meskipun sifeut transformasi ngon opacity mungken hana deuh mempengaroh cara elemen meutumpok seucara visual, awak nyan memang, ngon nyan untuk optimasi kinerja. Padum-padum boh properti CSS laen pih jeut jipeugot konteks stacking keu alasan nyang saban. MDN geubri daftar lengkap meunyo neuk neugali leubeh dalam. Na cukop padum-padum boh, nyang mantong meugambakan pakriban mudah jih hana sengaja tapeugot konteks stacking hana ta teupeu. Masalah “Peubuka Tumpukan” . Masalah tumpukan jeuet teuka kareuna le alasan, tapi na nyang leubeh umum nibak nyang laen. Komponen modal nakeuh pola klasik kareuna awaknyan peureulee geugantoe komponen nyan keu “geubuka” bak lapisan ateuh di ateuh mandum elemen laen, lheuh nyan geupeugadeh dari lapisan ateuh watee “geutop.” Lon cukop yakin bahwa geutanyoe mandum ka tajak lam situasi dipat geutanyoe ta buka modal dan, peu mantong alasan, hana deuh. Bukon hana jibuka deungon get, tapi hana deuh lam lapisan miyueb konteks tumpukan. Nyoe jitinggai gata teumanyong “pakriban cara jih?” sejak droeneuh neuset:

.lapisan { posisi: teutap; /* peugot konteks tumpukan */ z-indeks: 1; /* geupeuduek elemen nyan bak saboh lapisan di ateuh mandum nyang laen */ peutamong: 0; luwah: 100%; manyang: 100v; limpahan: teusöm; warna-latar: #00000080; }

Nyoe deuh beutoi, tapi meunyo elemen induk nyang na pemicu modal nakeuh elemen aneuk lam elemen induk laen nyang cit geuset keu z-index: 1, nyang secara teknis geupeuduek modal lam sublayer nyang dikaburkan le folder utama. Mari takalon skenario spesifik nyan dan padum-padum boh jeujak konteks tumpukan umum laen jih. Lon pike droeneuh akan neu kalon kon mantong kiban mudah jih hana sengaja neu peugot konteks stacking, tapi cit kiban cara salah neu atoe. Meunan cit, pakriban cara droeneuh neuwoe u nanggroe nyang dikelola nyan meugantung bak keuadaan. Skenario 1: Modal nyang ka teujeubak

Droeneuh jeuet neu kalon langsong modal droeneuh nyang teujeubak lam lapisan tingkat miyueb dan neuidentifikasi ureung chik. Ekstensi browser Pengembang pintar ka geupeugot ekstensi keu geubantu. Alat lagee nyoe “Inspektur Konteks Tumpukan CSS” ekstensi Chrome menambahkan tab z-index ekstra keu DevTools droeneuh untuk neutunyok informasi teuntang elemen nyang peugot konteks tumpukan.

Ekstensi IDE Droeneuh bahkan jeuet neukalon masalah watee pengembangan ngon ekstensi lagee nyoe keu VS Code, nyang menyorot masalah konteks stacking potensial langsong lam editor droeneuh.

Meubuka Tumpukan Dan Meurumpok Keulai Kontrol . Lheuh ta identifikasi ukheue peunyebab, langkah selanjut jih nakeuh tahadapi. Na padum-padum boh cara nyang jeuet gata cok keu tahadapi masalah nyoe, dan lon akan lon daftar meunurot urutan. Kamoe jeuet kamoe pileh soe mantong bak tingkat peu mantong, bah pih; hana meusidroe pih nyang hase meudawa atawa jihalang ureuëng laén. Meu ubah Struktur HTML . Nyoe geu anggap perbaikan nyang optimal. Keu droeneuh meurumpok masalah konteks stacking, droeneuh pasti ka neupeuduek padum-padum boh elemen lam posisi lucu lam HTML droeneuh. Restrukturisasi laman akan membantu droeneuh neubentuk lom DOM dan neupeugadeh masalah konteks stacking. Teume elemen nyang na masalah dan peuteubiet dari elemen trapping lam markup HTML. Miseu jih, geutanyoe jeuet tapeuseuleusoe skenario phon, “The Trapped Modal,” deungon tapeupinah .modal-wadah u luwa header dan tapeuduek lam elemen deungon droe jih.

Ulee