Сезнең CSS элементына z-index: 99999 куйдыгызмы, һәм ул башка элементлар өстенә чыкмыймы? Зур кыйммәт шул элементны визуаль рәвештә башка нәрсә өстенә куярга тиеш, барлык төрле элементлар түбән бәягә куелган яки бөтенләй куелмаган дип уйлап. Веб-бит гадәттә ике үлчәмле киңлектә күрсәтелә; шулай да, махсус CSS үзлекләрен кулланып, тирәнлекне җиткерү өчен хыялый z-күчәр яссылыгы кертелә. Бу яссылык экранга перпендикуляр, һәм аннан кулланучы элементларның тәртибен сизә, берсе икенчесенең өстендә. Хыялый z-күчәре артындагы идея, кулланучының тупланган элементларны кабул итүе, аны булдырган CSS үзлекләре берләшеп, без стакинг контексты дип атыйбыз. Веб-биттә элементларның ничек "тезелгән", төрү тәртибен контрольдә тоту, кирәк булганда "чыгару" элементларына практик карашлар турында сөйләшәчәкбез. Контекстларны туплау турында Веб-битегезне өстәл итеп күз алдыгызга китерегез. HTML элементларын өстәгәндә, сез өстәлгә кәгазь кисәкләрен куясыз. Соңгы кәгазь кисәге иң соңгы кушылган HTML элементына тиң, һәм ул аның алдына куелган бүтән кәгазьләр өстендә утыра. Бу гадәти документ агымы, хәтта ояланган элементлар өчен дә. Өстәл үзе бүтән папкаларны үз эченә алган элементы белән формалашкан тамыр туплау контекстын күрсәтә. Хәзер, махсус CSS үзлекләре уйный. Позиция (z-индексы белән), караңгылык, үзгәртү һәм үз эченә алган әйберләр папка кебек эш итә. Бу папка элементны һәм аның барлык балаларын ала, аларны төп юлдан чыгарып, аерым суб-стекка бүлеп, без стакинг контексты дип атыйбыз. Позицияләнгән элементлар өчен, без z-индекс бәясен автоматтан башка игълан иткәндә була. Караңгылык, үзгәртү, фильтр кебек үзенчәлекләр өчен, конкрет кыйммәтләр кулланылганда, стенировка контексты автоматик рәвештә ясала.
Моны аңларга тырышыгыз: Кәгазь кисәге (ягъни, бала элементы) папка эчендә булганда (ягъни, ата-аналарның контексты), ул папкадан беркайчан да чыга алмый һәм кәгазьләр арасында бүтән папкага урнаштырыла алмый. Аның z-индексы хәзер үз папкасында гына актуаль.
Түбәндәге иллюстрациядә В кәгазе хәзер В папкасын урнаштыру контекстында, һәм папкадагы башка кәгазьләр белән генә заказ бирергә мөмкин.
Күз алдыгызга китерегез, теләсәгез, сезнең өстәлдә ике папка бар:
. папка-a {z-индекс: 1; } . папка-б {з-индекс: 2; }
Әйдәгез, бераз яңартыйк. А папкасы эчендә махсус бит, z-индекс: 9999. В папкасы эчендә гади бит, z-индекс: 5.
. махсус-бит {z-индекс: 9999; } .plain-page {z-index: 5; }
Кайсы бит өстендә? Бу Б папкасында .plain-page. Браузер бала кәгазьләрен санга сукмый һәм башта ике папканы туплый. Ул В папкасын күрә (z-индекс: 2) һәм аны А папкасы өстенә куя (z-индекс: 1), чөнки без икесенең бердән зуррак булуын беләбез. Шул ук вакытта z-индекска куелган махсус бит: 9999 бит стакан төбендә, аның z-индексы мөмкин булган иң югары бәягә куелган булса да. Контекстны урнаштыру шулай ук ояланырга мөмкин (папкалар эчендәге папкалар), "гаилә агачы". Шул ук принцип кулланыла: бала беркайчан да ата-анасы папкасыннан кача алмый. Стакинг контекстлары группалар һәм катламнарны тәртипкә китергән папкалар кебек үзләрен ничек тотканнарын аңлагач, сорарга кирәк: ни өчен кайбер үзенчәлекләр - үзгәрү һәм караңгылык кебек - яңа стакинг контекстлары ясыйлар? Менә нәрсә: бу характеристикалар тышкы кыяфәтләре аркасында стенировкалар ясамыйлар. алар моны браузерның капот астында эшләве аркасында эшлиләр. Трансформация, караңгылык, фильтр яки перспективаны кулланганда, сез браузерга: "Әй, бу элемент хәрәкәтләнергә, әйләнергә яки сүнергә мөмкин, шуңа әзер булыгыз!"
Бу характеристикаларны кулланганда, браузер эффектив күрсәтү өчен яңа стакинг контексты ясый. Бу браузерга анимацияләрне, үзгәртүләрне, визуаль эффектларны мөстәкыйль эшләргә мөмкинлек бирә, бу элементларның битнең калган өлеше белән үзара бәйләнешен яңадан исәпләү ихтыяҗын киметә. Моны браузер әйтә: "Мин бу папканы аерым эшләячәкмен, шуңа күрә аның эчендә берәр нәрсә үзгәргән саен бөтен өстәлне үзгәртергә кирәк түгел." Ләкин барягы. Браузер элементны үз катламына күтәргәннән соң, ул эчендәге бар нәрсәне "тигезләргә" тиеш, яңа стакинг контекстын булдырырга. Аны аерым эшкәртү өчен өстәлдән папка алу кебек; бу папка эчендәге бар нәрсә төркемләнә, һәм браузер хәзер нәрсә өстендә утырганын хәл иткәндә аны бер берәмлек итеп карый. Шулай итеп, трансформация һәм караңгылык элементлары визуаль рәвештә урнашу рәвешенә тәэсир итмәсә дә, алар шулай эшли, һәм бу эшне оптимизацияләү өчен. Башка берничә CSS үзлекләре дә охшаш сәбәпләр аркасында стакинг контекстларын булдырырга мөмкин. Тирәнрәк казырга теләсәгез, MDN тулы исемлек бирә. Бик аз, бу бары тик белмичә стенировка контекстын булдыруның җиңеллеген күрсәтә. "Чыгару" проблемасы Тапшыру проблемалары күп сәбәпләр аркасында килеп чыгарга мөмкин, ләкин кайберләре башкаларга караганда еш очрый. Модаль компонентлар - классик үрнәк, чөнки алар компонентны бүтән элементлардан өстен катламга "ачу" өчен алыштырырга, аннары "ябык" булганда өске катламнан чыгаруны таләп итәләр. Минем уйлавымча, без барыбыз да модаль ачкан ситуациягә эләктек һәм, ни өчендер, ул күренми. Бу дөрес ачылмаган дигән сүз түгел, ә стакинг контекстының аскы катламында күренми. Бу сезне "ничек килеп чыга?" куйганнан бирле:
.overlay { позиция: тотрыклы; / * туплау контекстын тудыра * / z-индексы: 1; / * элементны катламнан өстен куя * / кертү: 0; киңлеге: 100%; биеклеге: 100вч; ташу: яшерелгән; фон-төс: # 00000080; }
Бу дөрес булып тоела, ләкин модаль триггерны үз эченә алган төп элемент башка ата-аналар элементы эчендә балалар элементы булса, ул шулай ук z-индекска куелган: 1, бу модальне төп папка белән капланган сублейерга урнаштыра. Әйдәгез, бу конкрет сценарийны һәм тагын берничә уртак стакинг контекстын карыйк. Минемчә, сез уйламыйча стенировкалау контекстын булдыру ничек җиңел булуын гына түгел, ә аларны ничек идарә итүне дә күрерсез. Шулай ук, идарә ителгән хәлгә ничек кайтуыгыз хәлгә бәйле. Сценарий 1: Тозак модаль
Сез модальне түбән дәрәҗәдәге катламга эләккәнне шунда ук күрә аласыз һәм ата-ананы ачыклый аласыз. Браузер киңәйтүләре Акыллы уйлап табучылар ярдәм итәр өчен киңәйтмәләр төзеделәр. Бу "CSS Стакинг Контекст Инспекторы" кебек кораллар Chrome киңәйтү сезнең DevTools'ка өстәмә z-индекс салынмасын өсти, сезгә стакинг контекстын булдыручы элементлар турында мәгълүмат күрсәтә.
IDE киңәйтүләре Сез хәтта үсеш вакытында проблемаларны VS коды өчен киңәйтү белән таба аласыз, бу сезнең редакторыгызда потенциаль стакинг контекст проблемаларын күрсәтә.
Контрольне кире кайтару Төп сәбәбен ачыклагач, киләсе адым - аның белән эш итү. Бу проблеманы чишү өчен сез берничә ысул куллана аласыз, һәм мин аларны тәртиптә күрсәтәчәкмен. Сез теләсә нинди дәрәҗәдә теләсә кемне сайлый аласыз; беркем дә зарланырга яки бүтәнгә комачаулый алмый. HTML структурасын үзгәртү Бу оптималь төзәтмә булып санала. Контекст проблемасына эләгү өчен, сез HTML эчендә кайбер элементларны көлке позицияләргә урнаштырган булырга тиеш. Битне реструктуризацияләү сезгә DOMны үзгәртеп корырга һәм контекст проблемаларын бетерергә ярдәм итәчәк. Проблемалы элементны табыгыз һәм аны HTML маркасындагы тозак элементыннан алыгыз. Мәсәлән, без .modal-контейнерны баштан күчереп һәм аны
элементына урнаштырып, "Тозак модаль" беренче сценарийны чишә алабыз. Башлам
Төп эчтәлек
Бу эчтәлекнең z-индексы 2 бар һәм ул әле модальне капламаячак.
Модаль исем
Хәзер мин бернәрсә дә артта калмыйм. Мин DOM реструктуризациясе нәтиҗәсендә яхшырак позиция алдым.
"Ачык модаль" төймәсенә баскач, модаль барлык нәрсәләр алдында булырга тиеш. Каләм сценарийын карагыз 1: Шойомбо Габриэль Айомидның капланган модалы (чишелеш). Theәр сүзнеңCSS-та ата-аналар контексты Әгәр дә элемент макетны бозмыйча хәрәкәт итә алмаса, нәрсә эшләргә? Бу проблеманы чишү яхшырак: ата-ана контекстны билгели. Контекстны җибәрү өчен җаваплы CSS милеген (яки үзлекләрен) табыгыз һәм бетерегез. Әгәр дә аның максаты булса һәм бетереп булмый икән, ата-анага бөтен контейнерны күтәрү өчен кардәш элементларына караганда z-индекс кыйммәтен бирегез. Z-индекс кыйммәте белән, төп контейнер өскә күчә, һәм аның балалары кулланучыга якынрак күренә. "Су асты тамчысы" сценарийында белгәннәребезгә нигезләнеп, без тамчы диңгез диңгезеннән чыга алмыйбыз; мәгънәсе булмас. Ләкин, без .navbar контейнерының z-индекс кыйммәтен .content элементының z-индекс кыйммәтеннән зуррак булырга мөмкин. .navbar { фон: 3333; / * z-индексы: 1; * / z-индексы: 3; позиция: туган; }
Бу үзгәреш белән .dropdown-меню хәзер эчтәлек алдында бернинди проблемасыз пәйда була.
Каләм сценарийын карагыз 2: Шойомбо Габриэль Айомиде су асты тамчысы (чишелеш).
Рамканы куллансагыз, порталларны карагыз
React яки Vue кебек рамкаларда, Портал - DOMдагы гадәти ата-аналар иерархиясеннән читтә компонент күрсәтергә мөмкинлек бирүче үзенчәлек. Порталлар сезнең компонентлар өчен телепортация җайланмасына охшаган. Алар сезгә компонентның HTML-ны документның теләсә кайсы почмагында күрсәтергә рөхсәт итәләр (гадәттә документ.body), аны реклама, дәүләт һәм вакыйгалар өчен төп ата-анасына тоташтырып. Бу контекст тозакларыннан котылу өчен бик яхшы, чөнки күрсәтелгән чыгыш проблемалы ата-аналар контейнерыннан читтә күренә.
ReactDOM.createPortal (
Бу сезнең төшү эчтәлеге ата-анасы артында яшерелмәвен тәэмин итә, хәтта ата-ана ташып китсә дә: яшерен яки түбән z-индексы. Элегерәк караган "Киселгән корал" сценарийында мин корал порталын ташып китүдән коткару өчен кулландым: документ клипына урнаштырып, контейнер эчендәге триггер өстенә куеп. Каләм сценарийын карагыз 3: Шойомбо Габриэль Айомидның киселгән корал (чишелеш). Як эффектсыз статистик контекст белән таныштыру Алдагы бүлектә аңлатылган барлык алымнар проблемалы стакинг контекстыннан элементларны "чыгаруга" юнәлтелгән, ләкин кайбер очраклар бар, сезгә чыннан да кирәк яки стакинг контекстын булдырырга теләү. Яңа стакинг контекстын булдыру җиңел, ләкин барлык алымнар ягы белән килә. Ягъни, изоляция кулланудан кала: изоляция. Элементка кулланылганда, бу элемент балаларының статистик контексты һәр балага карата һәм аннан тыш элементлар тәэсиренә түгел, ә шул контекстка билгеләнә. Классик мисал ул элементны z-index кебек тискәре кыйммәткә билгеләү: -1. Күз алдыгызга китерегез .Карт компоненты бар. Сез .card тексты артында утырган, ләкин картның фонында урнашкан декоратив форма өстәргә телисез. Карточкада стенировка контексты булмаса, z-index: -1 форманы тамыр стакинг контекстының төбенә җибәрә (бөтен бит). Бу аны .картның ак фоны артында юкка чыгара: Шойомбо Габриэль Айомидның каләм тискәре z-индексын карагыз (проблема). Бу проблеманы чишү өчен, без изоляция игълан итәбез: ата-анадан изоляция .card: Шойомбо Габриэль Айомидның каләм тискәре z-индексын (чишелеш) карагыз. Хәзер .card элементының үзе стенировка контекстына әверелә. Аның бала элементы - ясалган декоратив форма: псевдо-элемент алдыннан - z-индексы булганда: -1, ул ата-аналарның статистик контекстының иң төбенә китә. Ул текст артында һәм карта фоны өстендә бик яхшы утыра. Йомгаклау Исегездә тотыгыз: киләсе тапкыр сезнең z-индексы контрольдә булмаган кебек тоелса, ул капланган контекст. Белешмәләр
Тапшыру контексты (MDN) Z-индексы һәм төрү контекстлары (web.dev) "CSS-та изоляция милеге белән яңа стакинг контекстын ничек ясарга", Натали Пина "Нәрсә, з-индекс ??", Джош Комо
SmashingMag турында өстәмә уку
"Зур проектларда CSS Z-индексы белән идарә итү", Стивен Фризон "Ябык башлар һәм тулы биеклек элементлары: катлаулы комбинация", Филип Браунен "Компонентка нигезләнгән веб-кушымтада Z-индекс белән идарә итү", Павел Померанцев "Z-Index CSS милеге: комплекслы күренеш", Луи Лазарис
