ოდესმე დაგიყენებიათ z-ინდექსი: 99999 თქვენს CSS-ის ელემენტზე და ის არ გამოდის სხვა ელემენტებზე? ასეთი დიდი მნიშვნელობა ადვილად უნდა მოათავსოს ეს ელემენტი ვიზუალურად სხვა რამეზე, თუ ვივარაუდებთ, რომ ყველა სხვადასხვა ელემენტი დაყენებულია ან უფრო დაბალ მნიშვნელობაზე ან საერთოდ არ არის დაყენებული. ვებგვერდი ჩვეულებრივ წარმოდგენილია ორგანზომილებიან სივრცეში; თუმცა, კონკრეტული CSS თვისებების გამოყენებით, წარმოსახვითი z-ღერძის სიბრტყე შემოდის სიღრმის გადმოსაცემად. ეს სიბრტყე ეკრანზე პერპენდიკულარულია და მისგან მომხმარებელი აღიქვამს ელემენტების თანმიმდევრობას, ერთმანეთზე. წარმოსახვითი z-ღერძის, მომხმარებლის მიერ დაწყობილი ელემენტების აღქმის მიღმა, არის ის, რომ CSS თვისებები, რომლებიც ქმნიან მას, გაერთიანდება და ქმნის იმას, რასაც ჩვენ ვუწოდებთ დაწყობის კონტექსტს. ჩვენ ვაპირებთ ვისაუბროთ იმაზე, თუ როგორ ხდება ელემენტების „დაწყობა“ ვებ გვერდზე, რა აკონტროლებს დაწყობის წესრიგს და საჭიროების შემთხვევაში ელემენტების „დაწყობის“ პრაქტიკულ მიდგომებს. კონტექსტების დაწყობის შესახებ წარმოიდგინეთ თქვენი ვებგვერდი, როგორც მაგიდა. HTML ელემენტების დამატებისას, თქვენ დებთ ქაღალდის ნაჭრებს, ერთმანეთის მიყოლებით, მაგიდაზე. ბოლო მოთავსებული ქაღალდის ნაჭერი ექვივალენტურია ბოლო დამატებული HTML ელემენტისა და ის ზის მის წინ მოთავსებულ ყველა სხვა ქაღალდზე. ეს არის დოკუმენტის ნორმალური ნაკადი, თუნდაც ჩადგმული ელემენტებისთვის. თავად მაგიდა წარმოადგენს root დაწყობის კონტექსტს, რომელიც ჩამოყალიბებულია ელემენტით, რომელიც შეიცავს ყველა სხვა საქაღალდეს. ახლა, კონკრეტული CSS თვისებები მოქმედებს. ისეთი თვისებები, როგორიცაა პოზიცია (z-ინდექსით), გამჭვირვალობა, ტრანსფორმაცია და შემცველობა) მოქმედებს როგორც საქაღალდე. ეს საქაღალდე იღებს ელემენტს და მის ყველა შვილს, ამოიღებს მათ ძირითადი სტეკიდან და აჯგუფებს მათ ცალკეულ ქვესტეკში, ქმნის რასაც ჩვენ დაწყობის კონტექსტს ვუწოდებთ. განლაგებული ელემენტებისთვის, ეს ხდება მაშინ, როდესაც ჩვენ ვაცხადებთ z- ინდექსის მნიშვნელობას, გარდა ავტო. ისეთი თვისებებისთვის, როგორიცაა გამჭვირვალობა, ტრანსფორმაცია და ფილტრი, დაწყობის კონტექსტი ავტომატურად იქმნება კონკრეტული მნიშვნელობების გამოყენებისას.
შეეცადეთ გაიგოთ ეს: როგორც კი ქაღალდის ნაჭერი (მაგ., ბავშვის ელემენტი) იქნება საქაღალდეში (მაგ., მშობლის დაწყობის კონტექსტი), ის ვერასოდეს გამოდის ამ საქაღალდიდან ან განთავსდება სხვა საქაღალდეში ქაღალდებს შორის. მისი z-ინდექსი ახლა მხოლოდ მის საქაღალდეშია რელევანტური.
ქვემოთ მოცემულ ილუსტრაციაში, ქაღალდი B ახლა არის B საქაღალდის დაწყობის კონტექსტში და მისი შეკვეთა შესაძლებელია მხოლოდ საქაღალდეში არსებულ სხვა ქაღალდებთან ერთად.
წარმოიდგინეთ, თუ გინდათ, რომ თქვენს მაგიდაზე ორი საქაღალდე გაქვთ:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
მოდით განაახლოთ მარკირება ცოტათი. Inside Folder A არის სპეციალური გვერდი, z-index: 9999. Inside Folder B არის ჩვეულებრივი გვერდი, 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 თვისებას ასევე შეუძლია შექმნას დაწყობის კონტექსტები მსგავსი მიზეზების გამო. MDN გთავაზობთ სრულ ჩამონათვალს, თუ გსურთ ღრმად ჩასვლა. საკმაოდ ბევრია, რაც მხოლოდ ასახავს, თუ რამდენად ადვილია უნებლიეთ დაწყობის კონტექსტის შექმნა ამის ცოდნის გარეშე. "დაწყობის" პრობლემა დაწყობის პრობლემები შეიძლება წარმოიშვას მრავალი მიზეზის გამო, მაგრამ ზოგიერთი უფრო ხშირია, ვიდრე სხვები. მოდალური კომპონენტები კლასიკური ნიმუშია, რადგან ისინი საჭიროებენ კომპონენტის გადართვას, რათა „გახსნას“ ზედა ფენაზე ყველა სხვა ელემენტის ზემოთ, შემდეგ კი მისი ამოღება ზედა ფენიდან, როცა ის „დახურულია“. მე საკმაოდ დარწმუნებული ვარ, რომ ყველა ჩვენგანს წავაწყდით სიტუაციას, როდესაც ვხსნით მოდალს და, რაიმე მიზეზის გამო, ის არ ჩანს. ეს არ არის ის, რომ ის სწორად არ გაიხსნა, მაგრამ ის არ ჩანს დაწყობის კონტექსტის ქვედა ფენაში. ეს გიტოვებს გაინტერესებს "როგორ?" მას შემდეგ რაც დააყენეთ:
.გადაფარვა { პოზიცია: ფიქსირებული; /* ქმნის დაწყობის კონტექსტს */ z-ინდექსი: 1; /* აყენებს ელემენტს ფენაზე ყველაფერზე მაღლა */ ჩასმა: 0; სიგანე: 100%; სიმაღლე: 100vh; გადინება: დამალული; ფონის ფერი: #00000080; }
ეს სწორად გამოიყურება, მაგრამ თუ მშობელი ელემენტი, რომელიც შეიცავს მოდალურ ტრიგერს, არის შვილობილი ელემენტი სხვა მშობლის ელემენტში, რომელიც ასევე დაყენებულია z- ინდექსზე: 1, ეს ტექნიკურად ათავსებს მოდალს ქვეფენაში, რომელიც დაფარულია მთავარი საქაღალდის მიერ. მოდით შევხედოთ ამ კონკრეტულ სცენარს და რამდენიმე სხვა საერთო დაწყობის კონტექსტის ხაფანგს. ვფიქრობ, თქვენ დაინახავთ არა მხოლოდ, თუ რამდენად ადვილია უნებლიე დაწყობის კონტექსტების შექმნა, არამედ ასევე როგორ მართოთ ისინი არასწორად. ასევე, როგორ დაბრუნდებით მართულ მდგომარეობაში, დამოკიდებულია სიტუაციაზე. სცენარი 1: ხაფანგში მოდული
თქვენ შეგიძლიათ დაუყოვნებლივ იხილოთ თქვენი მოდალი, რომელიც დაბალი დონის ფენაშია ჩაფლული და ამოიცნოთ მშობელი. ბრაუზერის გაფართოებები ჭკვიანმა დეველოპერებმა შექმნეს გაფართოებები დასახმარებლად. ინსტრუმენტები, როგორიცაა ამ „CSS Stacking Context Inspector“ Chrome გაფართოება, ამატებს დამატებით z-ინდექსის ჩანართს თქვენს DevTools-ში, რათა გაჩვენოთ ინფორმაცია ელემენტების შესახებ, რომლებიც ქმნიან დაწყობის კონტექსტს.
IDE გაფართოებები თქვენ შეგიძლიათ შეამჩნიოთ პრობლემები განვითარების დროს გაფართოებით, როგორიცაა VS Code, რომელიც ხაზს უსვამს პოტენციურ დაწყობის კონტექსტის პრობლემებს პირდაპირ თქვენს რედაქტორში.
განლაგება და კონტროლის აღდგენა მას შემდეგ რაც დავადგინეთ ძირითადი მიზეზი, შემდეგი ნაბიჯი არის მასთან გამკლავება. ამ პრობლემის მოსაგვარებლად რამდენიმე მიდგომა შეგიძლიათ და მე ჩამოვთვლი მათ თანმიმდევრობით. თქვენ შეგიძლიათ აირჩიოთ ნებისმიერი ნებისმიერი დონის, თუმცა; არავის შეუძლია სხვას ჩივილი ან ხელი შეუშალოს. შეცვალეთ HTML სტრუქტურა ეს ითვლება ოპტიმალურ გამოსწორებად. იმისათვის, რომ შეგექმნათ დაწყობის კონტექსტის პრობლემა, თქვენ უნდა გქონდეთ განლაგებული ზოგიერთი ელემენტი სასაცილო პოზიციებში თქვენს HTML-ში. გვერდის რესტრუქტურიზაცია დაგეხმარებათ DOM-ის ფორმის შეცვლაში და დაწყობის კონტექსტის პრობლემის აღმოფხვრაში. იპოვეთ პრობლემური ელემენტი და ამოიღეთ იგი HTML მარკირების ელემენტიდან. მაგალითად, ჩვენ შეგვიძლია გადავჭრათ პირველი სცენარი, "The Trapped Modal", .modal-container-ის სათაურიდან ამოძრავებით და
ელემენტში თავისით მოთავსებით.ამ კონტენტს აქვს z-ინდექსი 2 და მაინც არ მოიცავს მოდალს.Header
მთავარი კონტენტი
როდესაც დააჭირეთ ღილაკს "გახსენით მოდალი", მოდალი განლაგებულია ყველაფრის წინ, როგორც ეს უნდა იყოს. იხილეთ კალმის სცენარი 1: ხაფანგში მოდული (გადაწყვეტა) [ჩანგალი] შოომბო გაბრიელ აიომიდის მიერ. დაარეგულირეთმშობელი დაწყობის კონტექსტი CSS-ში რა მოხდება, თუ ელემენტი არის ისეთი, რომლის გადაადგილება შეუძლებელია განლაგების დარღვევის გარეშე? ჯობია საკითხის მოგვარება: მშობელი ადგენს კონტექსტს. იპოვეთ CSS თვისება (ან თვისებები), რომელიც პასუხისმგებელია კონტექსტის გააქტიურებაზე და წაშალეთ იგი. თუ მას აქვს დანიშნულება და მისი ამოღება შეუძლებელია, მიეცით მშობელს უფრო მაღალი z-ინდექსის მნიშვნელობა, ვიდრე მისი და-ძმის ელემენტები, რათა ასწიოს მთელი კონტეინერი. უფრო მაღალი z-ინდექსის მნიშვნელობით, მშობელი კონტეინერი გადადის ზევით და მისი შვილები უფრო ახლოს ჩნდებიან მომხმარებელთან. „ჩაძირული ჩამოსაშლელი ჩამოსაშლელი“ სცენარიდან მიღებული ნასწავლიდან გამომდინარე, ჩვენ არ შეგვიძლია ჩამოსაშლელი მენიუს გადატანა ნავიბარიდან; აზრი არ ექნება. თუმცა, ჩვენ შეგვიძლია გავზარდოთ .navbar კონტეინერის z-ინდექსის მნიშვნელობა, რათა აღემატებოდეს .content ელემენტის z-index მნიშვნელობას. .navbar { ფონი: #333; /* z-ინდექსი: 1; */ z-ინდექსი: 3; პოზიცია: ნათესავი; }
ამ ცვლილებით, .Dropdown-მენიუ ახლა ჩნდება კონტენტის წინ უპრობლემოდ.
იხილეთ Pen Scenario 2: The Submerged Dropdown (Solution) [ჩანგალი] მიერ Shoyombo Gabriel Ayomide.
სცადეთ პორტალები, თუ იყენებთ ჩარჩოს
ისეთ ჩარჩოებში, როგორიცაა React ან Vue, პორტალი არის ფუნქცია, რომელიც საშუალებას გაძლევთ გადაიტანოთ კომპონენტი მისი ნორმალური მშობლის იერარქიის მიღმა DOM-ში. პორტალები ჰგავს ტელეპორტაციის მოწყობილობას თქვენი კომპონენტებისთვის. ისინი საშუალებას გაძლევთ გადაიტანოთ კომპონენტის HTML დოკუმენტში სადმე (როგორც წესი, პირდაპირ document.body-ში), ხოლო ლოგიკურად შეინარჩუნოთ იგი თავდაპირველ მშობელთან რეკვიზიტების, მდგომარეობისა და მოვლენებისთვის. ეს შესანიშნავია დაწყობის კონტექსტური ხაფანგებისგან თავის დასაღწევად, რადგან გამოტანილი გამომავალი სიტყვასიტყვით ჩნდება პრობლემური მშობელი კონტეინერის გარეთ.
ReactDOM.createPortal(
ეს უზრუნველყოფს, რომ თქვენი ჩამოსაშლელი კონტენტი არ იყოს დამალული მშობლის უკან, მაშინაც კი, თუ მშობელს აქვს გადინება: დამალული ან დაბალი z-ინდექსი. „მოჭრილი ხელსაწყოს მინიშნება“ სცენარში, რომელიც ადრე განვიხილეთ, მე გამოვიყენე პორტალი, რათა გადამეხსნა ინსტრუმენტების მინიშნება გადაჭარბებისგან: დამალული კლიპი დოკუმენტის სხეულში მოთავსებით და კონტეინერში ტრიგერის ზემოთ განთავსებით. იხილეთ Pen Scenario 3: The Clipped Tooltip (Solution) [ჩანგალი] შოომბო გაბრიელ აიომიდის მიერ. წარმოგიდგენთ დაწყობის კონტექსტს გვერდითი ეფექტების გარეშე წინა ნაწილში ახსნილი ყველა მიდგომა მიზნად ისახავს დაწყობის პრობლემური კონტექსტებიდან ელემენტების „განაშორებას“, მაგრამ არის სიტუაციები, როდესაც რეალურად დაგჭირდებათ ან გსურთ შექმნათ დაწყობის კონტექსტი. ახალი დაწყობის კონტექსტის შექმნა მარტივია, მაგრამ ყველა მიდგომას აქვს გვერდითი ეფექტი. ანუ იზოლაციის გამოყენების გარდა: იზოლირება. ელემენტზე გამოყენებისას, ამ ელემენტის ბავშვების დაწყობის კონტექსტი განისაზღვრება თითოეულ ბავშვთან და ამ კონტექსტში, ვიდრე მის გარეთ არსებული ელემენტების გავლენის ქვეშ. კლასიკური მაგალითია ამ ელემენტს უარყოფითი მნიშვნელობის მინიჭება, როგორიცაა z-index: -1. წარმოიდგინეთ, რომ თქვენ გაქვთ .card კომპონენტი. გსურთ დაამატოთ დეკორატიული ფორმა, რომელიც ჯდება .ბარათის ტექსტის უკან, მაგრამ ბარათის ფონის თავზე. ბარათზე დაწყობის კონტექსტის გარეშე, z-index: -1 აგზავნის ფორმას root დაწყობის კონტექსტის ბოლოში (მთელი გვერდი). ეს აქცევს მას .ბარათის თეთრი ფონის მიღმა: იხილეთ Pen Negative z-index (პრობლემა) [ჩანგალი] შოომბო გაბრიელ აიომიდის მიერ. ამის გადასაჭრელად ჩვენ ვაცხადებთ იზოლაციას: isolate მშობელ .card-ზე: იხილეთ Pen Negative z-index (გადაწყვეტა) [ჩანგალი] შოომბო გაბრიელ აიომიდის მიერ. ახლა, .card ელემენტი თავად ხდება დაწყობის კონტექსტი. როდესაც მის შვილო ელემენტს - დეკორატიულ ფორმას, რომელიც შეიქმნა ფსევდოელემენტზე: ადრე - აქვს z ინდექსი: -1, ის მიდის მშობლის დაწყობის კონტექსტის ბოლოში. ის მშვენივრად ზის ტექსტის უკან და ბარათის ფონის თავზე, როგორც ეს იყო განკუთვნილი. დასკვნა დაიმახსოვრეთ: შემდეგ ჯერზე, როცა თქვენი z-ინდექსი უკონტროლო ჩანს, ეს არის დაწყობის კონტექსტი. ცნობები
კონტექსტის დაწყობა (MDN) Z-ინდექსი და კონტექსტების დაწყობა (web.dev) „როგორ შევქმნათ ახალი დაწყობის კონტექსტი იზოლაციის თვისებით CSS-ში“, ნატალი პინა "What The Heck, z-index??", ჯოშ კომო
შემდგომი კითხვა SmashingMag-ზე
"CSS Z-Index-ის მართვა დიდ პროექტებში", სტივენ ფრისონი "წებოვანი სათაურები და სრული სიმაღლის ელემენტები: რთული კომბინაცია", ფილიპ ბრაუნენი "Z-ინდექსის მართვა კომპონენტზე დაფუძნებულ ვებ აპლიკაციაში", პაველ პომერანცევი "Z-Index CSS თვისება: ყოვლისმომცველი სახე", ლუი ლაზარისი
