Siz hech qachon CSS-dagi elementga z-index: 99999 ni o'rnatganmisiz va u boshqa elementlarning ustiga chiqmaydi? Barcha turli elementlar pastroq qiymatga o'rnatilgan yoki umuman o'rnatilmagan deb faraz qilgan holda, katta qiymat ushbu elementni vizual ravishda boshqa har qanday narsaning ustiga osongina joylashtirishi kerak. Veb-sahifa odatda ikki o'lchovli fazoda ifodalanadi; biroq, o'ziga xos CSS xususiyatlarini qo'llash orqali chuqurlikni etkazish uchun xayoliy Z o'qi tekisligi kiritiladi. Bu tekislik ekranga perpendikulyar bo'lib, undan foydalanuvchi elementlarning bir-birining ustiga joylashgan tartibini sezadi. Xayoliy z o'qi orqasidagi g'oya, foydalanuvchining stacked elementlarni idrok etishi shundan iboratki, uni yaratuvchi CSS xususiyatlari biz stacking konteksti deb ataydigan narsani hosil qilish uchun birlashadi. Elementlar veb-sahifada qanday qilib "stacked" qilinganligi, stacking tartibini nima nazorat qilishini va kerak bo'lganda elementlarni "ochish" bo'yicha amaliy yondashuvlar haqida gaplashamiz. Stacking kontekstlari haqida Veb-sahifangizni stol sifatida tasavvur qiling. HTML elementlarini qo'shganda, siz qog'oz parchalarini stol ustiga birin-ketin qo'yasiz. Oxirgi qo'yilgan qog'oz parchasi eng so'nggi qo'shilgan HTML elementiga teng bo'lib, uning oldiga qo'yilgan barcha boshqa qog'ozlar ustida joylashgan. Bu hatto ichki o'rnatilgan elementlar uchun ham oddiy hujjat oqimi. Stolning o'zi boshqa barcha papkalarni o'z ichiga olgan elementi tomonidan tuzilgan ildiz stacking kontekstini ifodalaydi. Endi maxsus CSS xususiyatlari o'ynaydi. Joylashuv (z-indeks bilan), shaffoflik, o'zgartirish va o'z ichiga olish kabi xususiyatlar papka kabi ishlaydi. Ushbu papka elementni va uning barcha bolalarini oladi, ularni asosiy stekdan ajratib oladi va ularni alohida kichik stekga guruhlaydi va biz stacking konteksti deb ataydigan narsani yaratadi. Joylashtirilgan elementlar uchun bu avtomatikdan boshqa z-indeks qiymatini e'lon qilganimizda sodir bo'ladi. Shaffoflik, o'zgartirish va filtr kabi xususiyatlar uchun maxsus qiymatlar qo'llanilganda stacking konteksti avtomatik ravishda yaratiladi.
Buni tushunishga harakat qiling: Bir varaq qog'oz (ya'ni, bola element) papkaga (ya'ni, ota-onaning stacking konteksti) ichida bo'lsa, u hech qachon bu jilddan chiqa olmaydi yoki boshqa papkadagi qog'ozlar orasiga joylashtirilmaydi. Uning z-indeksi endi faqat o'z papkasida tegishli.
Quyidagi rasmda B qog'ozi endi B jildning stacking kontekstida va uni faqat jilddagi boshqa qog'ozlar bilan buyurtma qilish mumkin.
Tasavvur qiling, agar xohlasangiz, stolingizda ikkita papka bor:
.papka-a { z-indeks: 1; } .papka-b {z-indeks: 2; }
Belgilashni biroz yangilaymiz. A jildning ichida maxsus sahifa joylashgan, z-index: 9999. B jildning ichida oddiy sahifa, z-index: 5.
.maxsus sahifa {z-indeks: 9999; } .plain-page {z-index: 5; }
Qaysi sahifa tepada? Bu B jildidagi .plain-page. Brauzer bolalar qog'ozlarini e'tiborsiz qoldiradi va avval ikkita jildni jamlaydi. U B jildni (z-indeks: 2) ko'radi va uni A (z-indeks: 1) jildining ustiga qo'yadi, chunki biz ikkita birdan katta ekanligini bilamiz. Shu bilan birga, .special-page z-index: 9999 sahifasiga o'rnatilgan, garchi uning z-indeksi mumkin bo'lgan eng yuqori qiymatga o'rnatilgan bo'lsa ham, stekning pastki qismida joylashgan. Stacking kontekstlari ham joylashtirilishi mumkin (papkalar ichidagi papkalar), "oila daraxti" ni yaratadi. Xuddi shu tamoyil amal qiladi: bola hech qachon ota-onasining papkasidan qochib qutula olmaydi. Endi siz stacking kontekstlari qatlamlarni guruhlaydigan va qayta tartiblaydigan papkalar kabi harakat qilishini bilganingizdan so'ng, so'rashga arziydi: nima uchun ba'zi xususiyatlar - transformatsiya va shaffoflik kabi - yangi stacking kontekstlarini yaratadi? Gap shundaki: bu xususiyatlar tashqi ko'rinishi tufayli stacking kontekstlarini yaratmaydi; ular brauzerning kaput ostida qanday ishlashi tufayli buni qilishadi. Transformatsiya, shaffoflik, filtr yoki istiqbolni qo'llaganingizda, siz brauzerga: "Hey, bu element harakatlanishi, aylanishi yoki o'chib ketishi mumkin, shuning uchun tayyor bo'ling!"
Ushbu xususiyatlardan foydalanganda brauzer renderlashni yanada samarali boshqarish uchun yangi stacking kontekstini yaratadi. Bu brauzerga animatsiyalarni, transformatsiyalarni va vizual effektlarni mustaqil ravishda boshqarish imkonini beradi, bu elementlarning sahifaning qolgan qismi bilan o'zaro ta'sirini qayta hisoblash zaruriyatini kamaytiradi. Buni brauzer shunday deb o'ylab ko'ring: "Men bu jildni alohida ishlayman, shuning uchun har safar ichidagi biror narsa o'zgarganda butun stolni o'zgartirishim shart emas". Lekin boryon ta'sir. Brauzer elementni o'z qatlamiga ko'targandan so'ng, u yangi stacking kontekstini yaratib, undagi hamma narsani "tekislashi" kerak. Bu alohida ishlov berish uchun stoldan papkani olib tashlashga o'xshaydi; ushbu papka ichidagi hamma narsa guruhlanadi va brauzer nimaning ustiga o'tirishni hal qilishda endi uni yagona birlik sifatida ko'radi. Shunday qilib, konvertatsiya va shaffoflik xususiyatlari elementlarning vizual tarzda to'planishiga ta'sir qilmasa ham, ular ishlaydi va bu ishlashni optimallashtirish uchun. Bir nechta boshqa CSS xususiyatlari ham shunga o'xshash sabablarga ko'ra stacking kontekstlarini yaratishi mumkin. Agar siz chuqurroq qazishni istasangiz, MDN to'liq ro'yxatni taqdim etadi. Bir nechtasi bor, ular bilmasdan turib stacking kontekstini yaratish qanchalik oson ekanligini ko'rsatadi. "O'chirish" muammosi Stacking bilan bog'liq muammolar ko'p sabablarga ko'ra paydo bo'lishi mumkin, ammo ba'zilari boshqalarga qaraganda tez-tez uchraydi. Modal komponentlar klassik naqshdir, chunki ular komponentni boshqa barcha elementlardan yuqori qatlamda "ochish" uchun almashtirishni, so'ngra "yopiq" bo'lganda uni yuqori qatlamdan olib tashlashni talab qiladi. Ishonchim komilki, hammamiz modal ochadigan vaziyatga duch keldik va har qanday sababga ko'ra u ko'rinmaydi. Bu to'g'ri ochilmaganida emas, balki stacking kontekstining pastki qatlamida ko'rinmaydi. Bu sizni “qanday qilib?” degan savol tug'diradi. siz o'rnatganingizdan beri:
.overlay { pozitsiyasi: qattiq; /* stacking kontekstini yaratadi */ z-indeks: 1; /* elementni hamma narsadan yuqori qatlamga qo'yadi */ kiritish: 0; kengligi: 100%; balandligi: 100vh; toshib ketish: yashirin; fon rangi: #00000080; }
Bu toʻgʻri koʻrinadi, lekin agar modal triggerni oʻz ichiga olgan asosiy element z-index: 1 ga ham oʻrnatilgan boshqa asosiy elementning ichki elementi boʻlsa, bu texnik jihatdan modalni asosiy jild tomonidan yashirilgan pastki qatlamga joylashtiradi. Keling, ushbu maxsus stsenariyni va boshqa bir nechta umumiy kontekstli tuzoqlarni ko'rib chiqaylik. O'ylaymanki, siz nafaqat tasodifan stacking kontekstlarini yaratish qanchalik osonligini, balki ularni qanday qilib noto'g'ri boshqarishni ham ko'rasiz. Bundan tashqari, boshqariladigan holatga qanday qaytishingiz vaziyatga bog'liq. Stsenariy 1: Tuzoq modal
Siz darhol modalingizni past darajadagi qatlamda qolib ketganini ko'rishingiz va ota-onani aniqlashingiz mumkin. Brauzer kengaytmalari Aqlli dasturchilar yordam berish uchun kengaytmalar yaratdilar. Ushbu “CSS Stacking Context Inspector” Chrome kengaytmasi kabi asboblar stacking kontekstini yaratuvchi elementlar haqida ma’lumot ko‘rsatish uchun DevTools-ga qo‘shimcha z-indeks yorlig‘ini qo‘shadi.
IDE kengaytmalari Siz hatto VS Code uchun kengaytma yordamida ishlab chiqish jarayonida muammolarni aniqlashingiz mumkin, bu esa to'g'ridan-to'g'ri muharriringizda stacking kontekstidagi potentsial muammolarni ta'kidlaydi.
Yechish va nazoratni qayta tiklash
Asosiy sababni aniqlaganimizdan so'ng, keyingi qadam u bilan kurashishdir. Ushbu muammoni hal qilish uchun bir nechta yondashuvlar mavjud va men ularni tartibda sanab o'taman. Siz har qanday darajadagi har kimni tanlashingiz mumkin; hech kim shikoyat qila olmaydi yoki boshqasiga to'sqinlik qila olmaydi.
HTML tuzilmasini o'zgartirish
Bu optimal tuzatish deb hisoblanadi. Stacking kontekst muammosiga duch kelishingiz uchun siz HTML ichida ba'zi elementlarni kulgili joylarga joylashtirgan bo'lishingiz kerak. Sahifani qayta qurish DOMni qayta shakllantirishga va stacking konteksti muammosini bartaraf etishga yordam beradi. Muammoli elementni toping va uni HTML belgilashdagi tutqich elementidan olib tashlang. Masalan, biz .modal-konteynerni sarlavhadan olib chiqib, uni o'z-o'zidan
Bu kontentning z-indeksi 2 ga teng va u hali ham modalni qamrab olmaydi.Sarlavha
Asosiy tarkib
“Modalni ochish” tugmasini bosganingizda, modal hamma narsaning oldida, xuddi shunday bo'lishi kerak bo'lganidek joylashtiriladi. Shoyombo Gabriel Ayomide tomonidan yozilgan 1-qalam stsenariysiga qarang: Tuzoqdagi modal (yechim). SozlangCSS-da ota-ona stacking konteksti Agar element tartibni buzmasdan harakatlana olmaydigan element bo'lsa-chi? Muammoni hal qilish yaxshiroqdir: ota-ona kontekstni belgilaydi. Kontekstni ishga tushirish uchun mas'ul bo'lgan CSS xususiyatini (yoki xususiyatlarini) toping va uni olib tashlang. Agar uning maqsadi bo'lsa va uni olib tashlab bo'lmasa, butun idishni ko'tarish uchun ota-onaga uning birodar elementlaridan yuqoriroq z-indeks qiymatini bering. Yuqori z-indeks qiymati bilan ota-konteyner yuqoriga ko'chiriladi va uning bolalari foydalanuvchiga yaqinroq ko'rinadi. “Suv ostidagi ochiladigan ro‘yxat” stsenariysida o‘rganganimizga asoslanib, biz ochiladigan menyuni navigatsiya panelidan ko‘chira olmaymiz; bu mantiqqa to'g'ri kelmaydi. Biroq, biz .navbar konteynerining z-indeks qiymatini .content elementining z-indeks qiymatidan kattaroq qilib oshirishimiz mumkin. .navbar { fon: #333; /* z-index: 1; */ z-index: 3; position: relative; }
Ushbu o'zgarish bilan endi .ochiladigan menyu hech qanday muammosiz kontent oldida paydo bo'ladi.
Shoyombo Gabriel Ayomide tomonidan yaratilgan 2-qalam stsenariysiga qarang: Suv ostida ochiladigan dastur (yechim).
Agar Framework ishlatilsa, portallarni sinab ko'ring
React yoki Vue kabi ramkalarda Portal - bu DOM-dagi oddiy ota-ona ierarxiyasidan tashqarida komponentni ko'rsatish imkonini beruvchi xususiyat. Portallar sizning komponentlaringiz uchun teleportatsiya qurilmasiga o'xshaydi. Ular sizga komponent HTML-ni hujjatning istalgan joyida (odatda to'g'ridan-to'g'ri document.body-ga) ko'rsatishga imkon beradi va shu bilan birga uni rekvizitlar, holat va hodisalar uchun asl ota-onasi bilan mantiqiy bog'lab turadi. Bu stacking kontekstli tuzoqlardan qochish uchun juda mos keladi, chunki ko'rsatilgan mahsulot tom ma'noda muammoli asosiy konteynerdan tashqarida paydo bo'ladi.
ReactDOM.createPortal(
Bu sizning ochiladigan kontentingiz ota-onasining orqasida yashirilmasligini ta'minlaydi, hatto ota-onada to'lib-toshgan bo'lsa ham: yashirin yoki pastroq z indeksi. Biz avvalroq ko‘rib chiqqan “Kesilgan asboblar maslahati” stsenariysida men Portaldan foydalanib, maslahatchini to‘lib ketishdan qutqardim: yashirin klip, uni hujjat tanasiga joylashtirish va uni konteyner ichidagi trigger ustiga joylashtirish. Shoyombo Gabriel Ayomide tomonidan 3-qalam stsenariysiga qarang: Kesilgan asboblar maslahati (yechim) [vilkali]. Nojo'ya ta'sirlarsiz stacking konteksti bilan tanishtirish Oldingi bo'limda tushuntirilgan barcha yondashuvlar muammoli stacking kontekstlaridan elementlarni "bo'shatish" ga qaratilgan, ammo ba'zi holatlar mavjud bo'lib, unda siz aslida stacking kontekstini yaratishingiz kerak bo'ladi. Yangi stacking kontekstini yaratish oson, ammo barcha yondashuvlar yon ta'sirga ega. Ya'ni, izolyatsiyani ishlatishdan tashqari: izolyatsiya qilish. Elementga qo'llanilganda, ushbu elementning bolalarining stacking konteksti uning tashqarisidagi elementlar ta'sirida emas, balki har bir bolaga nisbatan va shu kontekstda aniqlanadi. Klassik misol, bu elementga z-indeks kabi salbiy qiymatni belgilash: -1. Tasavvur qiling, sizda .card komponenti bor. Siz .card matnining orqasida, lekin karta fonining tepasida joylashgan dekorativ shaklni qo'shmoqchisiz. Kartadagi stacking kontekstisiz, z-index: -1 shaklni ildiz stacking kontekstining pastki qismiga yuboradi (butun sahifa). Bu uni .cardning oq fonida yo'qoladi: Shoyombo Gabriel Ayomid tomonidan yozilgan Pen salbiy z-indeksiga (muammo) qarang. Buni hal qilish uchun biz izolyatsiyani e'lon qilamiz: ota .cardda isolate: Shoyombo Gabriel Ayomid tomonidan yozilgan Pen Negative z-index (yechim) ga qarang. Endi .card elementining o'zi stacking kontekstiga aylanadi. Agar uning asosiy elementi - :before psevdo-elementda yaratilgan dekorativ shakl - z-indeksga ega bo'lsa: -1, u ota-onaning stacking kontekstining eng pastki qismiga o'tadi. U mo'ljallanganidek, matn orqasida va karta fonining tepasida juda yaxshi joylashadi. Xulosa Esingizda bo'lsin: keyingi safar z-indeksingiz nazoratdan tashqarida bo'lib ko'rinsa, bu stacking konteksti tuzoqqa tushadi. Ma'lumotnomalar
Stacking context (MDN) Z-indeks va stacking kontekstlari (web.dev) "CSS-da izolyatsiyalash xususiyati bilan yangi stacking kontekstini qanday yaratish kerak", Natali Pina "Nima The Heck, z-index?", Josh Comeau
SmashingMag haqida qo'shimcha o'qish
"Katta loyihalarda CSS Z-indexni boshqarish", Stiven Frison "Yopishqoq sarlavhalar va to'liq balandlikdagi elementlar: qiyin kombinatsiya", Filip Braunen "Komponentga asoslangan veb-ilovada Z-indeksni boshqarish", Pavel Pomerantsev "Z-index CSS mulki: keng qamrovli ko'rinish", Lui Lazaris
