Երբևէ սահմանե՞լ եք z-index՝ 99999 ձեր CSS-ի որևէ տարրի վրա, և այն դուրս չի գալիս այլ տարրերի վրա: Այդ մեծ արժեքը պետք է հեշտությամբ տեսողականորեն տեղադրի այդ տարրը որևէ այլ բանի վրա՝ ենթադրելով, որ բոլոր տարբեր տարրերը դրված են կամ ավելի ցածր արժեքով, կամ ընդհանրապես սահմանված չեն: Վեբ էջը սովորաբար ներկայացված է երկչափ տարածության մեջ. սակայն, կիրառելով հատուկ CSS հատկություններ, ներմուծվում է երևակայական z առանցքի հարթություն՝ խորությունը փոխանցելու համար: Այս հարթությունը ուղղահայաց է էկրանին, և դրանից օգտվողը ընկալում է տարրերի հերթականությունը՝ մեկը մյուսի վրա։ Երևակայական z-առանցքի գաղափարը, օգտագործողի կողմից կուտակված տարրերի ընկալումն այն է, որ այն ստեղծող CSS հատկությունները միավորվում են՝ ձևավորելով այն, ինչ մենք անվանում ենք կուտակման համատեքստ: Մենք կխոսենք այն մասին, թե ինչպես են տարրերը «դասավորվում» վեբ էջում, ինչն է վերահսկում կուտակման կարգը և անհրաժեշտության դեպքում տարրերը «ապակցելու» գործնական մոտեցումները: Stacking Contexts-ի մասին Պատկերացրեք ձեր վեբ էջը որպես գրասեղան: Երբ ավելացնում եք HTML տարրեր, դուք թղթի կտորներ եք դնում, մեկը մյուսի հետևից, գրասեղանի վրա: Տեղադրված վերջին թղթի կտորը համարժեք է ամենավերջին ավելացված HTML տարրին, և այն նստում է բոլոր մյուս թղթերի վրա, որոնք դրված են դրա առաջ: Սա փաստաթղթի նորմալ հոսք է, նույնիսկ ներկառուցված տարրերի համար: Գրասեղանն ինքնին ներկայացնում է արմատների կուտակման համատեքստը, որը ձևավորվել է տարրով, որը պարունակում է բոլոր մյուս թղթապանակները: Այժմ, հատուկ CSS հատկությունները հայտնվում են խաղի մեջ: Հատկությունները, ինչպիսիք են դիրքը (z-ինդեքսով), անթափանցիկությունը, փոխակերպումը և պարունակությունը, գործում են որպես թղթապանակ: Այս թղթապանակը վերցնում է տարրը և նրա բոլոր զավակները, հանում դրանք հիմնական կույտից և խմբավորում դրանք առանձին ենթակույտի մեջ՝ ստեղծելով այն, ինչ մենք անվանում ենք կուտակման համատեքստ: Դիրքավորված տարրերի համար դա տեղի է ունենում, երբ մենք հայտարարում ենք z-ի ցուցիչի արժեք, բացի auto-ից: Անթափանցիկության, փոխակերպման և ֆիլտրի նման հատկությունների համար կուտակման համատեքստը ստեղծվում է ավտոմատ կերպով, երբ կիրառվում են հատուկ արժեքներ:
Փորձեք հասկանալ սա․ Երբ թղթի կտորը (այսինքն՝ երեխայի տարրը) գտնվում է թղթապանակում (այսինքն՝ ծնողի կուտակման համատեքստը), այն երբեք չի կարող դուրս գալ այդ թղթապանակից կամ դրվել այլ թղթապանակի թղթերի միջև։ Նրա z-ինդեքսն այժմ տեղին է միայն իր սեփական թղթապանակում:
Ստորև բերված նկարում Paper B-ն այժմ գտնվում է B թղթապանակի կուտակման համատեքստում և կարող է պատվիրվել միայն թղթապանակում գտնվող այլ թղթերի հետ միասին:
Պատկերացրեք, եթե ցանկանում եք, որ ձեր գրասեղանի վրա երկու թղթապանակ կա.
.folder-a {z-index՝ 1; } .folder-b {z-index՝ 2; }
Եկեք մի փոքր թարմացնենք նշագրումը: Ներսում A թղթապանակը հատուկ էջ է, z-index՝ 9999։ Ներսում գտնվող թղթապանակը պարզ էջ է, z-index՝ 5։
.special-page { z-index՝ 9999; } .plain-page { z-index: 5; }
Ո՞ր էջն է վերևում: Դա .plain-էջն է Թղթապանակ B-ում: Զննարկիչը անտեսում է մանկական թղթերը և նախ դնում երկու թղթապանակները: Այն տեսնում է B թղթապանակը (z-ինդեքս՝ 2) և այն դնում է A թղթապանակի վերևում (z-ինդեքս՝ 1), քանի որ մենք գիտենք, որ երկուսը մեկից մեծ են: Միևնույն ժամանակ, .special-page-ը սահմանված է z-index. 9999 էջը գտնվում է փաթեթի ներքևում, չնայած որ դրա z-ի ինդեքսը սահմանված է առավելագույն հնարավոր արժեքի վրա: Փաթեթավորվող համատեքստերը կարող են նաև տեղադրվել (թղթապանակներ թղթապանակների ներսում)՝ ստեղծելով «տոհմածառ»: Գործում է նույն սկզբունքը՝ երեխան երբեք չի կարող փախչել ծնողների թղթապանակից։ Այժմ, երբ դուք հասկանում եք, թե ինչպես են դրսևորվող համատեքստերն իրենց պահում այնպիսի թղթապանակների պես, որոնք խմբավորում և վերադասավորում են շերտերը, արժե հարցնել. ինչո՞ւ են որոշ հատկություններ, ինչպիսիք են փոխակերպումը և անթափանցիկությունը, ստեղծում նոր կուտակման համատեքստեր: Ահա բանը. այս հատկությունները չեն ստեղծում կուտակման համատեքստեր՝ իրենց տեսքի պատճառով. նրանք դա անում են այն պատճառով, թե ինչպես է բրաուզերը աշխատում գլխարկի տակ: Երբ դուք կիրառում եք փոխակերպումը, անթափանցիկությունը, զտիչը կամ հեռանկարը, դուք զննարկիչին ասում եք. «Ահ, այս տարրը կարող է շարժվել, պտտվել կամ խամրել, այնպես որ պատրաստ եղեք»:
Երբ դուք օգտագործում եք այս հատկությունները, զննարկիչը ստեղծում է նոր կուտակման համատեքստ՝ ավելի արդյունավետ մատուցումը կառավարելու համար: Սա թույլ է տալիս դիտարկիչին ինքնուրույն կառավարել անիմացիաները, փոխակերպումները և վիզուալ էֆեկտները՝ նվազեցնելով վերահաշվարկի անհրաժեշտությունը, թե ինչպես են այդ տարրերը փոխազդում էջի մնացած հատվածի հետ: Մտածեք, որ զննարկիչը ասում է. «Ես այս թղթապանակն առանձին կմշակեմ, որպեսզի ստիպված չլինեմ վերափոխել ամբողջ աշխատասեղանը ամեն անգամ, երբ դրա ներսում ինչ-որ բան փոխվի»: Բայց կակողմնակի ազդեցություն. Երբ զննարկիչը տարրը բարձրացնում է իր շերտի մեջ, այն պետք է «հարթեցնի» դրա ներսում գտնվող ամեն ինչ՝ ստեղծելով կուտակման նոր համատեքստ: Դա նման է գրասեղանի վրայից թղթապանակ հանելու՝ այն առանձին մշակելու համար. այդ թղթապանակի ներսում ամեն ինչ խմբավորվում է, և զննարկիչն այժմ այն վերաբերվում է որպես մեկ միավորի, երբ որոշում է, թե ինչի վրա է նստած: Այսպիսով, թեև փոխակերպման և անթափանցիկության հատկությունները կարող են չազդել տարրերի տեսողական կուտակման վրա, դրանք ազդում են, և դա կատարողականի օպտիմալացման համար է: Մի քանի այլ CSS հատկություններ կարող են նաև ստեղծել stacking համատեքստեր նմանատիպ պատճառներով: MDN-ն տրամադրում է ամբողջական ցանկ, եթե ցանկանում եք ավելի խորանալ: Կան մի քանիսը, ինչը միայն ցույց է տալիս, թե որքան հեշտ է ակամա ստեղծել կուտակային համատեքստ առանց դրա մասին իմանալու: «Անջատելու» խնդիրը Stacking-ի հետ կապված խնդիրներ կարող են առաջանալ բազմաթիվ պատճառներով, բայց ոմանք ավելի տարածված են, քան մյուսները: Մոդալ բաղադրիչները դասական օրինաչափություն են, քանի որ դրանք պահանջում են միացնել բաղադրիչը, որպեսզի «բացվի» վերին շերտի վրա՝ բոլոր մյուս տարրերից վեր, այնուհետև հեռացնել այն վերին շերտից, երբ այն «փակ» է: Ես բավականին վստահ եմ, որ բոլորս էլ բախվել ենք մի իրավիճակի, երբ բացում ենք մոդալը և, ինչ պատճառով էլ որ լինի, այն չի հայտնվում: Դա այն չէ, որ այն ճիշտ չի բացվել, այլ այն, որ այն տեսադաշտից դուրս է stacking համատեքստի ստորին շերտում: Սա ձեզ ստիպում է մտածել, թե «ինչպե՞ս է ստացվում»: քանի որ դուք սահմանել եք.
.վերածում { դիրքը `ֆիքսված; /* ստեղծում է կուտակման համատեքստ */ z-ինդեքս՝ 1; /* տարրը դնում է շերտի վրա ամեն ինչից վեր */ ներդիր՝ 0; լայնությունը՝ 100%; բարձրությունը՝ 100 վժ; վարարում: թաքնված; ֆոնի գույնը՝ #00000080; }
Սա ճիշտ է թվում, բայց եթե մոդալ ձգան պարունակող մայր տարրը մեկ այլ մայր տարրում զավակ է, որը նույնպես դրված է z-ինդեքսի վրա՝ 1, դա տեխնիկապես տեղադրում է մոդալը հիմնական թղթապանակով ծածկված ենթաշերտում: Եկեք նայենք այդ կոնկրետ սցենարին և մի քանի այլ ընդհանուր stacking-context որոգայթներին: Կարծում եմ, դուք կտեսնեք ոչ միայն, թե որքան հեշտ է ակամայից կուտակվող համատեքստեր ստեղծելը, այլև ինչպես սխալ կառավարել դրանք: Նաև այն, թե ինչպես կվերադառնաք կառավարվող վիճակ, կախված է իրավիճակից: Սցենար 1. Թակարդված մոդալը
Դուք կարող եք անմիջապես տեսնել ձեր մոդալը, որը թակարդված է ցածր մակարդակի շերտում և բացահայտել ծնողին: Բրաուզերի ընդլայնումներ Խելացի մշակողները ստեղծել են ընդարձակումներ՝ օգնելու համար: Նման գործիքները, ինչպիսիք են «CSS Stacking Context Inspector» Chrome ընդլայնումը, ավելացնում են լրացուցիչ z-ինդեքսի ներդիր ձեր DevTools-ին, որպեսզի ձեզ տեղեկատվություն ցույց տան տարրերի մասին, որոնք ստեղծում են կուտակման համատեքստ:
IDE ընդլայնումներ Դուք նույնիսկ կարող եք խնդիրներ հայտնաբերել մշակման ընթացքում VS Code-ի նման ընդլայնման միջոցով, որն ընդգծում է հնարավոր կուտակման համատեքստի խնդիրները անմիջապես ձեր խմբագրում:
Վերականգնում և վերահսկողության վերականգնում Այն բանից հետո, երբ մենք բացահայտել ենք հիմնական պատճառը, հաջորդ քայլը դրանով զբաղվելն է: Կան մի քանի մոտեցումներ, որոնք կարող եք ձեռնարկել այս խնդիրը լուծելու համար, և ես դրանք կթվարկեմ ըստ հերթականության: Դուք կարող եք ընտրել ցանկացածին ցանկացած մակարդակում, թեև; ոչ ոք չի կարող բողոքել կամ խոչընդոտել մյուսին: Փոխեք HTML կառուցվածքը Սա համարվում է օպտիմալ շտկում: Որպեսզի դուք հանդիպեք stacking համատեքստի խնդրին, դուք պետք է որոշ տարրեր տեղադրած լինեք զվարճալի դիրքերում ձեր HTML-ում: Էջի վերակառուցումը կօգնի ձեզ վերափոխել DOM-ը և վերացնել կուտակման համատեքստի խնդիրը: Գտեք խնդրահարույց տարրը և հեռացրեք այն HTML նշագրման թակարդի տարրից: Օրինակ, մենք կարող ենք լուծել առաջին սցենարը՝ «The Trapped Modal»՝ տեղափոխելով .modal-container-ը վերնագրից և ինքնուրույն տեղադրելով
տարրի մեջ:Այս բովանդակությունն ունի 2 z-ինդեքս և դեռ չի ընդգրկի մոդալը:Վերնագիր
Հիմնական բովանդակություն
Երբ սեղմում եք «Բաց մոդալ» կոճակը, մոդալը տեղադրվում է մնացած ամեն ինչի առջև, ինչպես որ պետք է լինի: Տե՛ս գրչի սցենար 1. Թակարդված մոդալը (լուծում) [տառաքաղված] Շոյոմբո Գաբրիել Այոմիդի կողմից: Կարգավորել TheԾնողների կուտակման համատեքստը CSS-ում Ի՞նչ անել, եթե տարրն այնպիսին է, որը դուք չեք կարող տեղափոխել առանց դասավորությունը խախտելու: Ավելի լավ է անդրադառնալ խնդրին. ծնողը սահմանում է համատեքստը: Գտեք CSS հատկությունը (կամ հատկությունները), որոնք պատասխանատու են համատեքստի գործարկման համար և հեռացրեք այն: Եթե այն նպատակ ունի և հնարավոր չէ հեռացնել, ծնողին տվեք ավելի բարձր z-ի ցուցիչ արժեք, քան նրա եղբայր կամ եղբայր տարրերը՝ ամբողջ բեռնարկղը բարձրացնելու համար: Z-ի ցուցիչի ավելի բարձր արժեքով ծնող կոնտեյները շարժվում է դեպի վերև, և նրա երեխաները ավելի մոտ են հայտնվում օգտատիրոջը: Ելնելով այն ամենից, ինչ մենք սովորեցինք «Սուզված բացվող» սցենարից, մենք չենք կարող բացվող ցանկը դուրս տեղափոխել նավարկղից. դա իմաստ չի ունենա: Այնուամենայնիվ, մենք կարող ենք մեծացնել .navbar կոնտեյների z-ինդեքսի արժեքը, որպեսզի ավելի մեծ լինի, քան .content տարրի z-index արժեքը: .navbar { ֆոն՝ #333; /* z-ինդեքս՝ 1; */ z-ինդեքս՝ 3; պաշտոնը` հարաբերական; }
Այս փոփոխությամբ .բացվող ընտրացանկն այժմ հայտնվում է բովանդակության առջև՝ առանց որևէ խնդրի:
Տե՛ս Գրչի սցենար 2. Սուզված բացվող պատուհանը (Լուծում) [պատառաքաղված] Շոյոմբո Գաբրիել Այոմիդի կողմից:
Փորձեք պորտալները, եթե օգտագործում եք շրջանակ
React-ի կամ Vue-ի նման շրջանակներում պորտալը մի հատկություն է, որը թույլ է տալիս DOM-ում որևէ բաղադրիչ ներկայացնել իր սովորական մայրական հիերարխիայից դուրս: Պորտալները նման են հեռահաղորդման սարքի ձեր բաղադրիչների համար: Նրանք թույլ են տալիս Ձեզ մատուցել բաղադրիչի HTML-ը փաստաթղթի ցանկացած կետում (սովորաբար հենց document.body-ի մեջ), մինչդեռ այն տրամաբանորեն կապված է իր սկզբնական ծնողի հետ՝ հենակետերի, վիճակի և իրադարձությունների համար: Սա կատարյալ է կուտակման համատեքստի թակարդներից խուսափելու համար, քանի որ ցուցադրված ելքը բառացիորեն հայտնվում է խնդրահարույց մայր կոնտեյներից դուրս:
ReactDOM.createPortal(
Սա երաշխավորում է, որ ձեր իջնող բովանդակությունը չի թաքցվում իր ծնողի հետևում, նույնիսկ եթե ծնողը հեղեղել է՝ թաքնված կամ ավելի ցածր z ինդեքս: «Կտրված գործիքի հուշում» սցենարում, որը մենք նայեցինք ավելի վաղ, ես օգտագործեցի պորտալ՝ գործիքի հուշումը փրկելու համար. Տե՛ս Գրիչի սցենար 3. Կտրված գործիքի հուշում (լուծում) [պատառաքաղված] Շոյոմբո Գաբրիել Այոմիդի կողմից: Ներկայացնում ենք Stacking Context առանց կողմնակի էֆեկտների Նախորդ բաժնում բացատրված բոլոր մոտեցումներն ուղղված են խնդրահարույց կուտակման համատեքստերից տարրերը «հանելուն», բայց կան իրավիճակներ, երբ իրականում ձեզ անհրաժեշտ կլինի կամ ցանկանում եք ստեղծել կուտակման համատեքստ: Ստեյքի նոր համատեքստ ստեղծելը հեշտ է, բայց բոլոր մոտեցումներն ունեն կողմնակի ազդեցություն: Այսինքն՝ բացառությամբ մեկուսացման օգտագործման՝ մեկուսացնել։ Երբ կիրառվում է տարրի վրա, այդ տարրի զավակների կուտակման համատեքստը որոշվում է յուրաքանչյուր երեխայի նկատմամբ և այդ համատեքստում, այլ ոչ թե դրանից դուրս գտնվող տարրերի ազդեցության տակ: Դասական օրինակ է այդ տարրին բացասական արժեք հատկացնելը, օրինակ՝ z-ինդեքսը՝ -1: Պատկերացրեք, որ դուք ունեք .card բաղադրիչ: Դուք ցանկանում եք ավելացնել դեկորատիվ ձև, որը գտնվում է .card-ի տեքստի հետևում, բայց քարտի ֆոնի վրա: Առանց քարտի վրա կուտակման համատեքստի, z-ինդեքսը. Սա ստիպում է այն անհետանալ .card-ի սպիտակ ֆոնի հետևում. Տես գրիչի բացասական z-ինդեքսը (խնդիրը) [forked] Շոյոմբո Գաբրիել Այոմիդի կողմից: Դա լուծելու համար մենք հայտարարում ենք մեկուսացում. isolate ծնողի վրա .card: Տե՛ս Գրիչի բացասական z-ինդեքսը (լուծում) [forked] Շոյոմբո Գաբրիել Այոմիդի կողմից: Այժմ .card տարրն ինքնին դառնում է կուտակման համատեքստ: Երբ նրա երեխա տարրը՝ :before կեղծ տարրի վրա ստեղծված դեկորատիվ ձևը, ունի z ինդեքս՝ -1, այն անցնում է ծնողների կուտակման համատեքստի ամենաներքևում: Այն հիանալի տեղավորվում է տեքստի հետևում և քարտի ֆոնի վրա, ինչպես նախատեսված է: Եզրակացություն Հիշեք. հաջորդ անգամ, երբ ձեր z-ի ինդեքսը թվա, որ վերահսկողությունից դուրս է, դա ծուղակում կուտակված համատեքստ է: Հղումներ
Փաթեթավորման համատեքստ (MDN) Z-ի ինդեքս և կուտակման համատեքստեր (web.dev) «Ինչպե՞ս ստեղծել նոր կուտակման համատեքստ CSS-ում մեկուսացման հատկությամբ», Նատալի Պինա «What The Heck, z-index?», Ջոշ Քոմո
Լրացուցիչ ընթերցում SmashingMag-ում
«CSS Z-Index-ի կառավարում խոշոր նախագծերում», Սթիվեն Ֆրիսոն «Կպչուն վերնագրեր և ամբողջ բարձրության տարրեր. բարդ համակցություն», Ֆիլիպ Բրաունեն «Z-Index-ի կառավարում բաղադրիչի վրա հիմնված վեբ հավելվածում», Պավել Պոմերանցև «Z-Index CSS հատկությունները. համապարփակ տեսք», Լուի Լազարիս
