Оё шумо ягон бор z-index: 99999-ро дар як унсури CSS-и худ насб кардаед ва он дар болои унсурҳои дигар намебарояд? Қимате, ки калон аст, бояд он элементро ба таври визуалӣ дар болои ҳама чизи дигар ҷойгир кунад, ба шарте ки ҳамаи унсурҳои гуногун бо арзиши камтар муқаррар карда шудаанд ё тамоман муқаррар карда нашудаанд. Веб-саҳифа одатан дар фазои дученака муаррифӣ мешавад; аммо, бо истифода аз хосиятҳои мушаххаси CSS, як ҳавопаймои хаёлии z-меҳвар барои интиқоли умқ ҷорӣ карда мешавад. Ин ҳавопаймо ба экран перпендикуляр аст ва аз он корбар тартиби элементҳоро, ки яке болои дигар аст, дарк мекунад. Идеяи паси меҳвари хаёлии z, дарки корбар дар бораи унсурҳои ҷамъшуда, дар он аст, ки хосиятҳои CSS, ки онро эҷод мекунанд, муттаҳид мешаванд, то он чизеро, ки мо контексти stacking меномем, ташкил медиҳанд. Мо дар бораи он сӯҳбат хоҳем кард, ки чӣ гуна элементҳо дар саҳифаи интернетӣ "часта" мешаванд, тартиби стекеро чӣ назорат мекунад ва равишҳои амалии "баровардани" унсурҳо ҳангоми зарурат. Дар бораи контекстҳои stacking Веб саҳифаи худро ҳамчун мизи корӣ тасаввур кунед. Ҳангоме ки шумо унсурҳои HTML илова мекунед, шумо пораҳои коғазро паси дигаре болои мизи корӣ мегузоред. Варақаи охирини коғази гузошташуда ба унсури HTML-и навтарин иловашуда баробар аст ва он дар болои ҳамаи коғазҳои дигаре, ки пеш аз он гузошта шудаанд, менишинад. Ин ҷараёни муқаррарии ҳуҷҷат аст, ҳатто барои унсурҳои лона. Худи мизи корӣ контексти решаканкунии решаро ифода мекунад, ки аз ҷониби элементи ташкил шудааст, ки ҳамаи ҷузвдонҳои дигарро дар бар мегирад. Ҳоло, хосиятҳои мушаххаси CSS ба бозӣ меоянд. Хусусиятҳо ба монанди мавқеъ (бо индекси z), шаффофият, табдил додан ва дарбаргиранда) мисли ҷузвдон амал мекунанд. Ин ҷузвдон як элемент ва ҳамаи кӯдакони онро мегирад, онҳоро аз стеки асосӣ ҷудо мекунад ва онҳоро ба зер-стеки алоҳида гурӯҳбандӣ мекунад ва он чизеро, ки мо контексти стек меномем, эҷод мекунад. Барои унсурҳои ҷойгиршуда, ин вақте рӯй медиҳад, ки мо арзиши индекси z-ро ба ғайр аз худкор эълон мекунем. Барои хосиятҳо ба монанди шаффофият, трансформатсия ва филтр, контексти stacking ба таври худкор ҳангоми татбиқи арзишҳои мушаххас сохта мешавад.
Кӯшиш кунед, ки инро бифаҳмед: Вақте ки як пораи коғаз (яъне, унсури кӯдак) дар дохили ҷузвдон ҷойгир аст (яъне, контексти stacking волидайн), он ҳеҷ гоҳ наметавонад аз он ҷузвдон берун шавад ё дар байни коғазҳо дар ҷузвдони дигар ҷойгир карда шавад. Индекси z ҳоло танҳо дар дохили ҷузвдони худ мувофиқ аст.
Дар расми дар поён буда, коғази B ҳоло дар доираи контексти stacking Folder B ҷойгир аст ва онро танҳо бо дигар коғазҳои ҷузвдон фармоиш додан мумкин аст.
Тасаввур кунед, ки агар хоҳед, дар мизи кории шумо ду ҷузвдон доред:
.папка-a { z-index: 1; } .папкаи-b {z-index: 2; }
Биёед аломатро каме навсозӣ кунем. Дар дохили ҷузвдони А саҳифаи махсус аст, z-index: 9999. Дар дохили ҷузвдони В саҳифаи оддӣ аст, z-index: 5.
.саҳифаи махсус {z-index: 9999; } .plain-саҳифа {z-index: 5; }
Кадом саҳифа дар боло аст? Ин саҳифаи .plain-page дар папкаи В мебошад. Браузер коғазҳои кӯдаконаро нодида мегирад ва аввал ду ҷузвдонро ҷамъ мекунад. Он папкаи B (z-index: 2) -ро мебинад ва онро дар болои ҷузвдони А ҷойгир мекунад (z-index: 1), зеро мо медонем, ки ду аз як калонтар аст. Дар ҳамин ҳол, саҳифаи .special-саҳифаи ба z-index: 9999 муқарраршуда дар поёни стек ҷойгир аст, гарчанде ки индекси z-и он ба арзиши баландтарин муқаррар карда шудааст. Контекстҳои stacking инчунин метавонанд ҷойгир карда шаванд (папкаҳо дар дохили ҷузвдонҳо), эҷод кардани "дарахти оилавӣ". Ҳамин принсип татбиқ мешавад: кӯдак ҳеҷ гоҳ аз папкаи волидони худ гурехта наметавонад. Акнун, ки шумо мефаҳмед, ки контекстҳои стекерӣ ба мисли ҷузвдонҳое рафтор мекунанд, ки қабатҳоро гурӯҳбандӣ мекунанд ва аз нав тартиб медиҳанд, бояд бипурсед: чаро хосиятҳои муайян, ба монанди трансформатсия ва шаффофият - контекстҳои нави стекингро эҷод мекунанд? Гап дар сари он аст: ин хосиятҳо контекстҳои stacking-ро аз сабаби намуди зоҳирии онҳо эҷод намекунанд; онҳо ин корро аз он сабаб мекунанд, ки браузер дар зери сарпӯш чӣ гуна кор мекунад. Вақте ки шумо трансформатсия, шаффофият, филтр ё дурнаморо татбиқ мекунед, шумо ба браузер мегӯед: "Ҳей, ин элемент метавонад ҳаракат кунад, гардиш кунад ё пажмурда шавад, аз ин рӯ омода бошед!"
Вақте, ки шумо ин хосиятҳоро истифода мебаред, браузер контексти нави stacking эҷод мекунад, то ба таври муассиртар идора карда шавад. Ин ба браузер имкон медиҳад, ки аниматсияҳо, тағиротҳо ва эффектҳои визуалиро мустақилона идора карда, зарурати аз нав ҳисоб кардани ҳамкориҳои ин унсурҳо бо қисми боқимондаи саҳифаро коҳиш диҳад. Онро ҳамчун браузер фикр кунед, ки мегӯяд: "Ман ин ҷузвдонро алоҳида идора мекунам, то ҳар дафъае, ки чизе дар дохили он тағир ёбад, ба ман лозим нест, ки тамоми мизро иваз кунам." Аммо вуҷуд дорадтаъсири тараф. Вақте ки браузер як элементро ба қабати худ мебардорад, он бояд ҳама чизро дар дохили он "ҳамвор кунад" ва контексти нави стекингро эҷод кунад. Ин ба он монанд аст, ки ҷузвдонро аз мизи корӣ гирифта, онро алоҳида идора кунед; ҳама чиз дар дохили он ҷузвдон гурӯҳбандӣ карда мешавад ва ҳоло браузер ҳангоми интихоби он, ки дар болои он чӣ нишастааст, онро ҳамчун як воҳиди ягона баррасӣ мекунад. Ҳамин тавр, гарчанде ки хосиятҳои трансформатсия ва шаффофият ба тарзи ба таври визуалӣ ҷойгиршавии унсурҳо таъсир нарасонанд, онҳо таъсир мерасонанд ва ин барои беҳсозии кор аст. Якчанд хосиятҳои дигари CSS низ метавонанд бо сабабҳои шабеҳ контекстҳои stacking эҷод кунанд. MDN рӯйхати пурраро пешниҳод мекунад, агар шумо хоҳед, ки амиқтар кобед. Бисёре аз онҳо ҳастанд, ки танҳо нишон медиҳанд, ки то чӣ андоза осон будани нохост эҷод кардани контексти стекинг бидуни донистани он. Мушкилоти "Кор кардан" Масъалаҳои stacking метавонад бо сабабҳои зиёд ба миён ояд, аммо баъзеҳо нисбат ба дигарон бештар маъмуланд. Компонентҳои модалӣ як намунаи классикӣ мебошанд, зеро онҳо иваз кардани ҷузъро барои "кушодан" дар қабати боло дар болои ҳама унсурҳои дигар талаб мекунанд ва пас аз он, ки "пӯшида" аст, онро аз қабати боло хориҷ мекунанд. Ман комилан итминон дорам, ки ҳамаи мо ба вазъияте дучор шудаем, ки мо модал мекушоем ва бо ҳар сабаб, он ба назар намерасад. Ин на он аст, ки он дуруст кушода нашудааст, балки он дар қабати поёнии контексти стекинг аз назар дур аст. Ин шуморо водор мекунад, ки "чӣ тавр?" азбаски шумо муқаррар кардаед:
.overlay { мавқеъ: собит; /* контексти stacking эҷод мекунад */ индекси z: 1; /* элементро дар қабати болотар аз ҳама чиз мегузорад */ дохил: 0; паҳнои: 100%; баландӣ: 100vh; боло рафтан: ниҳон; замина ранги: # 00000080; }
Ин дуруст ба назар мерасад, аммо агар унсури волидайне, ки триггери модалӣ дорад, як унсури кӯдак дар дохили дигар унсури волидайн бошад, ки он низ ба z-index: 1 таъин шудааст, он аз ҷиҳати техникӣ модальро дар зерқабати аз ҷониби ҷузвдони асосӣ пинҳоншуда ҷойгир мекунад. Биёед ба ин сенарияи мушаххас ва якчанд дигар домҳои маъмулии контекстӣ назар андозем. Ман фикр мекунам, ки шумо на танҳо хоҳед дид, ки чӣ гуна эҷод кардани нохост контекстҳои stacking осон аст, балки инчунин идоракунии нодурусти онҳо. Инчунин, чӣ гуна шумо ба ҳолати идорашаванда бармегардед, аз вазъият вобаста аст. Сенарияи 1: Модали ба дом афтода
Шумо фавран метавонед модали худро дар қабати сатҳи пасти худ бубинед ва волидайнро муайян кунед. Васеъ кардани браузер Таҳиягарони интеллектуалӣ барои кӯмак васеъшавӣ сохтаанд. Асбобҳое ба монанди ин "CSS Stacking Context Inspector" васеъшавии Chrome ба DevTools-и худ ҷадвали z-index илова мекунанд, то ба шумо маълумот дар бораи унсурҳоеро, ки контексти stacking эҷод мекунанд, нишон диҳанд.
Васеъшавии IDE Шумо ҳатто метавонед мушкилотро ҳангоми таҳия бо тавсеаи монанди ин барои VS Code муайян кунед, ки масъалаҳои эҳтимолии контекстиро бевосита дар муҳаррири шумо таъкид мекунад.
Кушодан ва барқарор кардани назорат Пас аз муайян кардани сабаби аслӣ, қадами навбатӣ мубориза бо он аст. Якчанд роҳҳое ҳастанд, ки шумо метавонед барои ҳалли ин мушкилот истифода баред ва ман онҳоро ба тартиб номбар мекунам. Шумо метавонед касеро дар ҳама сатҳ интихоб кунед, ҳарчанд; хеч кас шикоят карда, ба дигаре халал расонда наметавонад. Тағир додани сохтори HTML Ин ислоҳи беҳтарин ҳисобида мешавад. Барои он ки шумо ба як масъалаи контексти стекер дучор шавед, шумо бояд баъзе элементҳоро дар ҷойҳои хандовар дар дохили HTML ҷойгир карда бошед. Таҷдиди сохтори саҳифа ба шумо дар тағир додани DOM ва бартараф кардани мушкилоти контекстӣ кӯмак мекунад. Унсури мушкилотро ёбед ва онро аз элементи траппинг дар аломатгузории HTML хориҷ кунед. Масалан, мо метавонем сенарияи аввал, "Модали ба дом афтода" -ро тавассути кӯчонидани .modal-контейнер аз сарлавҳа ва ҷойгир кардани он дар элементи <тана> худаш ҳал кунем.
<сарлавҳа синфи = "сарлавҳа">
Сарлавҳа
<синфи асосӣ = "content">Мундариҷаи асосӣ
Ин мундариҷа индекси z-и 2 дорад ва ҳоло ҳам модалиро дарбар намегирад.
Вақте ки шумо тугмаи "Модалро кушоед" -ро пахш мекунед, модаль дар пеши ҳама чизҳои дигар, тавре ки бояд бошад, ҷойгир карда мешавад. Ба сенарияи қалами 1 нигаред: Модали ба дом афтода (Ҳалли) [форкшуда] аз ҷониби Шоёмбо Габриэл Айомид. Танзими TheКонтексти истихроҷи волидайн дар CSS Чӣ мешавад, агар элементе бошад, ки шумо бе вайрон кардани тарҳ ҳаракат карда наметавонед? Беҳтар аст, ки масъаларо ҳал кунед: волидайн контекстро муқаррар мекунад. Амволи (ё хосиятҳои) CSS-ро, ки барои ангезиши контекст масъуланд, пайдо кунед ва онро хориҷ кунед. Агар он мақсад дошта бошад ва онро хориҷ кардан ғайриимкон бошад, ба волидайн нисбат ба унсурҳои бародараш арзиши баландтари z-index диҳед, то тамоми контейнерро бардорад. Бо арзиши баландтари z-index, контейнери волидайн ба боло ҳаракат мекунад ва кӯдакони он ба корбар наздиктар пайдо мешаванд. Бар асоси он чизе, ки мо дар сенарияи "Дар зери афтанда" фаҳмидем, мо наметавонем афтандаро аз навор берун кунем; ин маъно надорад. Аммо, мо метавонем арзиши z-index-и контейнери .navbarро зиёд кунем, то аз арзиши z-index унсури .content бузургтар бошад. .navbar { замина: #333; /* z-index: 1; */ индекси z: 3; мавқеъ: нисбӣ; }
Бо ин тағирот, менюи афтанда ҳоло дар назди мундариҷа бе ягон мушкилот пайдо мешавад. Ба сенарияи 2-юми қалам нигаред: афтанда дар зери зери об (ҳал) [форкшуда] аз ҷониби Шоёмбо Габриэл Айомид. Порталҳоро санҷед, агар чаҳорчӯба истифода шавад Дар чаҳорчӯбаҳо ба монанди React ё Vue, Портал хусусиятест, ки ба шумо имкон медиҳад ҷузъро берун аз иерархияи муқаррарии волидайн дар DOM пешниҳод кунед. Порталҳо ба монанди дастгоҳи телепортатсия барои ҷузъҳои шумо ҳастанд. Онҳо ба шумо имкон медиҳанд, ки HTML-и ҷузъро дар ҳама ҷо дар ҳуҷҷат (одатан рост ба document.body) пешниҳод кунед ва дар ҳоле ки онро ба волидайни аслии худ барои реквизитҳо, ҳолат ва рӯйдодҳо мантиқан пайваст нигоҳ доред. Ин барои гурехтани домҳои контекстӣ комил аст, зеро баромади додашуда аслан берун аз контейнери волидайни мушкилӣ пайдо мешавад. ReactDOM.createPortal ( <Маслиҳати асбоб />, ҳуҷҷат.бадан );
Ин кафолат медиҳад, ки мундариҷаи афтандаатон дар паси волидайни худ пинҳон нест, ҳатто агар волидайн аз ҳад зиёд зиёд бошад: пинҳон ё индекси поёнии z. Дар сенарияи "Маслиҳати буридашуда", ки мо қаблан дида будем, ман як Порталро барои наҷот додани маслиҳати абзор аз изофабор истифода кардам: клипи пинҳонӣ тавассути ҷойгир кардани он дар бадани ҳуҷҷат ва ҷойгир кардани он дар болои триггер дар дохили контейнер. Ба сенарияи қалам 3 нигаред: Маслиҳати буридашуда (Ҳалли) [форкшуда] аз ҷониби Шоёмбо Габриэл Айомид. Муаррифии контексти stacking бидуни таъсири тараф Ҳама равишҳое, ки дар боби қаблӣ шарҳ дода шудаанд, барои “баровардани” унсурҳо аз контекстҳои стеккунии мушкил нигаронида шудаанд, аммо баъзе ҳолатҳое ҳастанд, ки шумо воқеан ба контексти стекинг ниёз доред ё мехоҳед эҷод кунед. Эҷоди контексти нави стекинг осон аст, аммо ҳама равишҳо бо таъсири тараф меоянд. Яъне, ба истиснои истифодаи изолятсия: изолятсия. Вақте ки ба як унсур татбиқ карда мешавад, контексти stacking фарзандони ин элемент нисбат ба ҳар як кӯдак ва дар дохили он контекст муайян карда мешавад, на аз таъсири унсурҳои берун аз он. Мисоли классикӣ ин таъин кардани он унсури арзиши манфӣ мебошад, ба монанди z-index: -1. Тасаввур кунед, ки шумо як ҷузъи .card доред. Шумо мехоҳед шакли ороиширо илова кунед, ки дар паси матни .карт ҷойгир аст, аммо дар болои заминаи корт. Бе контексти stacking дар корт, z-index: -1 шаклро ба поёни контексти stacking реша (тамоми саҳифа) мефиристад. Ин боиси нопадид шудани он дар паси заминаи сафеди .card мегардад: Нигаред ба Pen Negative z-index (мушкилот) [forked] аз ҷониби Шоёмбо Габриэл Айомид. Барои ҳалли ин, мо изолятсияро эълон мекунем: isolate on the parent .card: Нигаред ба Pen Negative z-index (ҳалли) [forked] аз ҷониби Шоёмбо Габриэл Айомид. Ҳоло, худи унсури .card ба контексти stacking табдил меёбад. Вақте ки унсури кӯдаки он - шакли ороишӣ, ки дар :пеш аз псевдо-элемент сохта шудааст, дорои z-index: -1 аст, он ба поёни контексти stacking волидайн меравад. Он мувофиқи пешбинишуда дар паси матн ва дар болои заминаи корт комилан ҷойгир аст. Хулоса Дар хотир доред: дафъаи оянда z-index-и шумо аз назорат берун ба назар мерасад, ин контексти stacking ба дом афтода аст. Иқтибосҳо
Контексти stacking (MDN) Z-index ва контекстҳои stacking (web.dev) "Чӣ гуна бояд контексти нави stacking бо амволи изолятсия дар CSS эҷод карда шавад", Натали Пина "Чӣ Ҳек, z-index?", Ҷош Комо
Хониши минбаъда дар SmashingMag
"Идоракунии CSS Z-index дар лоиҳаҳои калон", Стивен Фрисон "Сарлавҳаҳои часпанда ва унсурҳои баландии пурра: омезиши мураккаб", Филип Браунен «Идоракунии Z-index дар веб замимаи ба компонент асосёфта», Павел Померанцев "Моликияти Z-Index CSS: Назари ҳамаҷониба", Луис Лазарис
