Та хэзээ нэгэн цагт z-index: 99999-г CSS-ийн элемент дээр тохируулж байсан бөгөөд энэ нь бусад элементүүдийн дээр гарч ирэхгүй байна уу? Бүх өөр элементүүдийг бага утгаар тохируулсан эсвэл огт тохируулаагүй гэж үзвэл том утга нь тухайн элементийг ямар ч зүйлийн дээр хялбархан байрлуулна. Вэб хуудсыг ихэвчлэн хоёр хэмжээст орон зайд төлөөлдөг; Гэсэн хэдий ч тодорхой CSS шинж чанаруудыг ашигласнаар гүнийг дамжуулахын тулд z тэнхлэгийн төсөөллийн хавтгайг нэвтрүүлдэг. Энэ хавтгай нь дэлгэцтэй перпендикуляр бөгөөд үүнээс хэрэглэгч элементүүдийн дарааллыг нэг нэгээр нь авч үздэг. Хэрэглэгчийн овоолсон элементүүдийн талаарх төсөөлөл болох z тэнхлэгийн цаад санаа нь түүнийг үүсгэсэн CSS шинж чанарууд нь нийлж бидний stacking context гэж нэрлэдэг зүйл юм. Бид вэб хуудсан дээр элементүүдийг хэрхэн "овоолсон", давхарлах дарааллыг юу хянадаг, шаардлагатай үед элементүүдийг "таслах" практик аргуудын талаар ярих болно. Стекийн контекстүүдийн тухай Вэб хуудсаа ширээ гэж төсөөлөөд үз дээ. Та HTML элементүүдийг нэмэх үед ширээн дээр нэг нэгээр нь цаас тавьж байна. Сүүлд байрлуулсан цаас нь хамгийн сүүлд нэмэгдсэн HTML элементтэй тэнцэх бөгөөд өмнө нь байрлуулсан бусад бүх цаасан дээр байрладаг. Энэ нь үүрлэсэн элементүүдийн хувьд ч гэсэн ердийн баримт бичгийн урсгал юм. Ширээ нь өөрөө бусад бүх фолдеруудыг агуулсан элементээр үүсгэгдсэн үндсэн давхаргын контекстийг төлөөлдөг. Одоо тодорхой CSS шинж чанарууд ажиллаж байна. Байрлал (z-индекстэй), тунгалаг байдал, хувиргах, агуулах зэрэг шинж чанарууд нь хавтас шиг ажилладаг. Энэ хавтас нь элемент болон түүний бүх хүүхдүүдийг авч, тэдгээрийг үндсэн стекээс гаргаж аваад тусдаа дэд стек болгон бүлэглэж, бидний стекийн контекст гэж нэрлэдэг зүйлийг үүсгэдэг. Байршуулсан элементүүдийн хувьд энэ нь автоматаас өөр z индексийн утгыг зарлахад тохиолддог. Тунгалаг байдал, хувиргах, шүүлтүүр гэх мэт шинж чанаруудын хувьд тодорхой утгыг ашиглах үед давхаргын контекст автоматаар үүсдэг.
Үүнийг ойлгохыг хичээгээрэй: Нэгэнт цаас (жишээ нь, хүүхэд элемент) хавтсанд (жишээ нь, эцэг эхийн овоолсон контекст) орвол тэр хавтаснаас хэзээ ч гарч чадахгүй эсвэл өөр хавтас дахь цаасны хооронд байрлуулж болохгүй. Түүний z-индекс нь одоо зөвхөн өөрийн хавтсанд хамааралтай.
Доорх зурган дээр В цаас нь одоо В хавтасны овоолсон контекст дотор байгаа бөгөөд зөвхөн хавтсанд байгаа бусад цаастай хамт захиалах боломжтой.
Хэрэв хүсвэл таны ширээн дээр хоёр хавтас байна гэж төсөөлөөд үз дээ:
.хавтас-a {z-индекс: 1; } .folder-b {z-индекс: 2; }
Тэмдэглэгээг бага зэрэг шинэчилье. А хавтас дотор тусгай хуудас, z-индекс: 9999. В хавтас дотор энгийн хуудас, z-индекс: 5.
.тусгай хуудас {z-индекс: 9999; } .энгийн хуудас {z-индекс: 5; }
Аль хуудас дээр байгаа вэ? Энэ нь B хавтас дахь .plain-page юм. Хөтөч нь хүүхдийн цаасыг үл тоомсорлож, эхлээд хоёр фолдерыг давхарлана. Энэ нь B фолдерыг (z-индекс: 2) харж, хоёр нь нэгээс их гэдгийг мэддэг учраас үүнийг А хавтас (z-индекс: 1) дээр байрлуулдаг. Үүний зэрэгцээ, .special-page z-index: 9999 хуудас нь z-индексийг боломжит хамгийн өндөр утгаар тохируулсан ч стекийн доод талд байна. Овоолсон контекстуудыг мөн үүрлэж (хавтас доторх хавтаснууд) "гэр бүлийн мод" үүсгэж болно. Үүнтэй ижил зарчим үйлчилнэ: хүүхэд эцэг эхийнхээ хавтсаас хэзээ ч зугтаж чадахгүй. Одоо та давхарласан контекстүүд давхаргуудыг бүлэглэх, дахин эрэмбэлэх фолдер шиг ажилладагийг олж мэдсэн тул дараах асуултаас асуух нь зүйтэй болов уу: хувиргах, тунгалаг байдал гэх мэт зарим шинж чанарууд яагаад шинэ давхаргын контекстүүдийг үүсгэдэг вэ? Энд нэг зүйл байна: эдгээр шинж чанарууд нь харагдах байдлаасаа болж давхарласан контекст үүсгэдэггүй; Хөтөч нь тагны доор хэрхэн ажилладаг учраас тэд үүнийг хийдэг. Та хувиргах, тунгалаг байдал, шүүлтүүр эсвэл хэтийн төлөвийг ашиглах үед хөтөчдөө "Хөөе, энэ элемент хөдөлж, эргэлдэж эсвэл бүдгэрч магадгүй тул бэлэн байгаарай!"
Таныг эдгээр шинж чанаруудыг ашиглах үед хөтч нь дүрслэлийг илүү үр дүнтэй удирдахын тулд шинэ стек контекстийг үүсгэдэг. Энэ нь хөтөчийг хөдөлгөөнт дүрс, хувиргалт, визуал эффектүүдийг бие даан зохицуулах боломжийг олгож, эдгээр элементүүд нь хуудасны бусад хэсгүүдтэй хэрхэн харьцаж байгааг дахин тооцоолох хэрэгцээг багасгадаг. Хөтөч нь "Би энэ хавтсыг тусад нь зохицуулна, ингэснээр дотор нь ямар нэг зүйл өөрчлөгдөх бүрт ширээнээ бүхэлд нь өөрчлөх шаардлагагүй болно" гэж бодоод үзээрэй. Гэхдээ байгаагаж нөлөө. Хөтөч нь элементийг өөрийн давхарга руу өргөсний дараа доторх бүх зүйлийг "хавтгай" болгож, шинэ давхаргын контекстийг үүсгэх ёстой. Энэ нь хавтасыг тусад нь зохицуулахын тулд ширээн дээрээс авахтай адил юм; Энэ фолдер доторх бүх зүйл бүлэглэгдэх ба хөтөч нь юуны дээр суухыг шийдэхдээ үүнийг нэг нэгж болгон авч үздэг. Хэдийгээр хувиргах болон тунгалаг байдлын шинж чанарууд нь элементүүдийн харагдах байдалд нөлөөлөхгүй байж болох ч энэ нь гүйцэтгэлийг оновчтой болгоход зориулагдсан юм. Бусад хэд хэдэн CSS шинж чанарууд нь үүнтэй төстэй шалтгааны улмаас стекийн контекст үүсгэж болно. Хэрэв та илүү гүнзгий ухахыг хүсч байвал MDN нь бүрэн жагсаалтыг өгдөг. Цөөн хэдэн зүйл байдаг бөгөөд энэ нь зөвхөн өөрийн мэдэлгүйгээр овоолсон контекстийг санамсаргүйгээр үүсгэх нь хичнээн амархан болохыг харуулж байна. "Буулгах" асуудал Овоолсон асуудал нь олон шалтгааны улмаас үүсч болох боловч зарим нь бусдаас илүү түгээмэл байдаг. Модаль бүрэлдэхүүн хэсгүүд нь сонгодог загвар юм, учир нь тэдгээр нь бүрэлдэхүүн хэсгийг бусад бүх элементийн дээгүүр дээд давхарга дээр "нээх" гэж асааж, дараа нь "хаагдсан" үед дээд давхаргаас нь салгах шаардлагатай болдог. Бид бүгд модаль нээж, ямар ч шалтгаанаар энэ нь харагдахгүй байх нөхцөл байдалд орсон гэдэгт би итгэлтэй байна. Энэ нь зөв нээгдээгүй биш, харин давхарласан контекстийн доод давхаргад харагдахгүй байна. Энэ нь таныг “яаж байгаа юм бэ?” гэж гайхахад хүргэдэг. та тохируулснаас хойш:
.давхах { байрлал: тогтмол; /* давхарлах контекстийг үүсгэдэг */ z индекс: 1; /* элементийг бүх зүйлээс дээгүүр давхарга дээр байрлуулна */ оруулах: 0; өргөн: 100%; өндөр: 100vh; халих: далд; дэвсгэр өнгө: #00000080; }
Энэ нь зөв харагдаж байна, гэхдээ хэрэв модаль триггер агуулсан эх элемент нь z-index: 1 гэж тохируулсан өөр эх элемент доторх хүүхэд элемент бол энэ нь үндсэн хавтсанд далдлагдсан дэд давхаргад модыг техникийн хувьд байрлуулдаг. Энэ тодорхой хувилбар болон овоолсон контекстийн өөр хэд хэдэн нийтлэг бэрхшээлийг харцгаая. Санамсаргүйгээр овоолсон контекст үүсгэх нь хичнээн амархан болохыг төдийгүй тэдгээрийг хэрхэн буруу удирдахыг та харах болно гэж би бодож байна. Мөн та хэрхэн удирдаж буй төлөв рүү буцах нь тухайн нөхцөл байдлаас хамаарна. Хувилбар 1: Урхинд орсон загвар
Та өөрийн модаль доод түвшний давхаргад баригдаж байгааг шууд харж, эцэг эхийг таньж болно. Хөтөчийн өргөтгөлүүд Ухаалаг хөгжүүлэгчид туслахын тулд өргөтгөлүүдийг бүтээсэн. "CSS Stacking Context Inspector" Chrome өргөтгөлтэй адил хэрэгслүүд нь таны DevTools-д нэмэлт z-индекс таб нэмж, stacking контекст үүсгэдэг элементүүдийн талаарх мэдээллийг харуулах болно.
IDE өргөтгөлүүд VS Code-д зориулсан үүнтэй адил өргөтгөлийн тусламжтайгаар та хөгжүүлэлтийн явцад гарсан асуудлуудыг илрүүлж болох бөгөөд энэ нь овоолсон контекстийн болзошгүй асуудлуудыг редактор дээрээ шууд тодруулдаг.
Савыг задлах, хяналтыг сэргээх Бид үндсэн шалтгааныг олж мэдсэний дараа дараагийн алхам бол үүнийг шийдвэрлэх явдал юм. Энэ асуудлыг шийдэхийн тулд та хэд хэдэн арга хэрэглэж болох бөгөөд би тэдгээрийг дарааллаар нь жагсаах болно. Та ямар ч түвшний хэнийг ч сонгож болно; хэн ч гомдоллож, хэн нэгэнд саад болж чадахгүй. HTML бүтцийг өөрчлөх Энэ нь хамгийн оновчтой засвар гэж тооцогддог. Стекийн контекст асуудалтай тулгарахын тулд та HTML доторх зарим элементүүдийг хөгжилтэй байрлалд байрлуулсан байх ёстой. Хуудсын бүтцийн өөрчлөлт нь DOM-ийн хэлбэрийг өөрчлөх, давхарласан контекстийн асуудлыг арилгахад тусална. Асуудалтай элементийг хайж олоод HTML тэмдэглэгээний хавчуулах элементээс устгана уу. Жишээлбэл, бид .modal-контейнерийг толгой хэсгээс гаргаж
элементэд дангаар нь байрлуулснаар "The Trapped Modal" гэсэн эхний хувилбарыг шийдэж болно.Энэ контент нь 2-ын z индекстэй ба модалийг хамрахгүй хэвээр байна.Толгой
Үндсэн агуулга
"Нээлттэй мод" товчийг дарахад модаль нь байх ёстой зүйлийнхээ өмнө байрлана. Үзэгний хувилбар 1: Урхинд баригдсан загвар (Шийдвэр) [салаатай] Шоёмбо Габриэл Айомидег үзнэ үү. ТохируулахCSS дэх эцэг эхийн овоолох контекст Хэрэв та зохион байгуулалтыг зөрчихгүйгээр хөдөлж чадахгүй элемент байвал яах вэ? Асуудлыг шийдэх нь дээр: эцэг эх нь нөхцөл байдлыг тогтоодог. Контекстийг өдөөх үүрэгтэй CSS шинж чанарыг (эсвэл шинж чанаруудыг) олж, устгана уу. Хэрэв энэ нь зорилготой бөгөөд арилгах боломжгүй бол савыг бүхэлд нь өргөхийн тулд эцэг эхэд нь дүүгийн элементүүдээс өндөр z индексийн утгыг өгнө үү. Илүү өндөр z-индекстэй бол эх контейнер дээд тал руу шилжиж, түүний хүүхдүүд хэрэглэгчдэд илүү ойр харагдана. "Усан доорх уналт" хувилбарт сурсан зүйл дээрээ үндэслэн бид унадаг цэсийг navbar-аас зөөж чадахгүй; энэ нь утгагүй болно. Гэсэн хэдий ч бид .navbar контейнерийн z-индекс утгыг .content элементийн z-индекс утгаас их болгох боломжтой. .navbar { дэвсгэр: #333; /* z-индекс: 1; */ z индекс: 3; албан тушаал: харьцангуй; }
Энэхүү өөрчлөлтийг хийснээр .dropdown цэс одоо агуулгын өмнө ямар ч асуудалгүйгээр гарч ирнэ. Үзэгний 2-р хувилбарыг үзнэ үү: Шоёмбо Габриэл Айомидегийн бичсэн живсэн уналт (Шийдэл) [салаатай]. Хэрэв Framework ашиглаж байгаа бол порталуудыг туршаад үзээрэй React эсвэл Vue гэх мэт фреймворкуудын хувьд Портал нь DOM дахь ердийн эцэг эхийн шатлалаас гадуур бүрэлдэхүүн хэсгийг үзүүлэх боломжийг олгодог функц юм. Порталууд нь таны бүрэлдэхүүн хэсгүүдийн телепортын төхөөрөмжтэй адил юм. Тэд танд бүрэлдэхүүн хэсгийн HTML-г баримт бичгийн аль ч хэсэгт (ихэвчлэн document.body дотор) харуулахын зэрэгцээ түүнийг тулгуур, төлөв, үйл явдлын эх эхтэй логик холбоотой байлгах боломжийг олгодог. Үзүүлсэн гаралт нь асуудалтай эх контейнерийн гадна гарч ирдэг тул энэ нь давхарласан контекст хавхаас зайлсхийхэд тохиромжтой. ReactDOM.createPortal( <Хэрэгслийн зөвлөгөө />, баримт бичиг. бие );
Энэ нь эцэг эх нь халих: нуугдмал эсвэл бага z индекстэй байсан ч таны унждаг контентыг эцэг эхийнхээ ард нуухгүй байх боломжийг олгоно. Бидний өмнө нь авч үзсэн "Таслагдсан хэрэгслийн зөвлөмж" хувилбарт би Портал ашиглан хэрэгслийн зөвлөмжийг халихаас аварсан: далд клипийг баримтын үндсэн хэсэгт байрлуулж, савны доторх гох дээр байрлуулах замаар. Үзэгний хувилбар 3-ыг үзнэ үү: Шоёмбо Габриэль Айомидегийн бичсэн Clipped Tooltip (Шийдэл) [салаатай]. Гаж нөлөөгүйгээр овоолох контекстийг танилцуулж байна Өмнөх хэсэгт тайлбарласан бүх арга барилууд нь асуудалтай стекийн контекстээс элементүүдийг "салгахад" чиглэгддэг хэдий ч танд овоолсон контекст үнэхээр хэрэгтэй эсвэл үүсгэхийг хүсэх зарим нөхцөл байдал бий. Стекийн шинэ контекст үүсгэх нь хялбар боловч бүх арга барил нь гаж нөлөө үзүүлдэг. Энэ нь тусгаарлалтыг ашиглахаас бусад тохиолдолд: тусгаарлах. Элементэд хэрэглэх үед тухайн элементийн хүүхдүүдийн овоолсон контекст нь түүний гаднах элементүүдийн нөлөөнд автахаас илүүтэйгээр хүүхэд тус бүртэй болон тухайн контекстийн хүрээнд тодорхойлогддог. Сонгодог жишээ бол тухайн элементэд z-индекс: -1 гэх мэт сөрөг утгыг өгөх явдал юм. Танд .card бүрэлдэхүүн байна гэж төсөөлөөд үз дээ. Та .card-н текстийн ард, харин картын дэвсгэр дээр байрлах гоёл чимэглэлийн дүрс нэмэхийг хүсэж байна. Карт дээр овоолсон контекст байхгүй бол z-индекс: -1 нь дүрсийг үндсэн давхаргын контекстийн доод талд (бүх хуудас) илгээдэг. Энэ нь үүнийг .card-н цагаан дэвсгэрийн ард алга болгоно: Шоёмбо Габриэл Айомидийн бичсэн үзэгний сөрөг z-индексийг (асуудал) үзнэ үү. Үүнийг шийдэхийн тулд бид тусгаарлалтыг зарлаж байна: эцэг эх .card дээр isolate: Шоёмбо Габриэль Айомидийн бичсэн Үзэгний сөрөг z-индексийг (шийдвэр) [салаатай] үзнэ үү. Одоо .card элемент нь өөрөө овоолсон контекст болж байна. Хэрэв түүний хүүхэд элемент болох :before псевдо-элемент дээр үүсгэсэн гоёл чимэглэлийн хэлбэр нь z-индекстэй бол: -1, энэ нь эцэг эхийн давхарласан контекстийн хамгийн доод хэсэгт очно. Энэ нь зориулалтын дагуу текстийн ард болон картын дэвсгэр дээр төгс байрладаг. Дүгнэлт Дараагийн удаа таны z-индекс хяналтаас гарсан мэт санагдах үед энэ нь хавчуулагдсан стекийн контекст гэдгийг санаарай. Лавлагаа
Стекийн контекст (MDN) Z-индекс ба давхарлах контекст (web.dev) Натали Пина "CSS-д тусгаарлах шинж чанар бүхий шинэ давхаргын контекстийг хэрхэн үүсгэх вэ" Жош Комо, "Ямар z-индекс вэ?"
SmashingMag дээр нэмэлт унших
"Том төслүүдэд CSS Z-индексийг удирдах нь", Стивен Фрисон "Наалттай толгой ба бүрэн өндөрт элементүүд: төвөгтэй хослол", Филип Браунен Павел Померанцев "Компонентт суурилсан вэб програмд Z-индексийг удирдах нь" "Z-Index CSS Property: цогц харагдах байдал", Луис Лазарис
