უარყოფითი z-ინდექსი. სიმძლავრის z-ინდექსი: დეტალური სახე. z-index მუშაობს მხოლოდ პოზიციურ ელემენტებთან

z-index-ის პრობლემა ის არის, რომ ბევრ ადამიანს უბრალოდ არ ესმის როგორ მუშაობენ.
ყველაფერი, რაც ქვემოთ არის აღწერილი, არის W3C სპეციფიკაციების მიხედვით. სამწუხაროდ, ყველაფერს ვერ ვკითხულობ.

პრობლემის აღწერა:

ოჰ, ძვირფასო, არ დავივიწყოთ HTML კოდი, რომელიც შედგება 3 ელემენტისგან.
ამოიღეთ ტყავი მათგან სათითაოდ. კანს კი, თავის ფერში, აქვს თავისი ფონი: წითელი, მწვანე და ლურჯი. გარდა ამისა, უპირველეს ყოვლისა, კანი ათავსებს დოკუმენტის აბსოლუტურად ზედა მარცხენა კიდეს ისე, რომ ოდნავ გადაფარავს მის უკან არსებულ კიდეს. პირველს აქვს z-ინდექსი, რომელიც უდრის 1-ს, დანარჩენ ორს არ აქვს z-ინდექსი.

ქვემოთ მოცემულია HTML კოდი ძირითადი CSS დიზაინით.

წითელი

მწვანე

ლურჯი

.წითელი, .მწვანე, .ლურჯი (პოზიცია: აბსოლუტური;) .წითელი (ფონი: წითელი; z-ინდექსი: 1;) .მწვანე (ფონი: მწვანე;) .ლურჯი (ფონი: ლურჯი;)
კონდახი jsfiddle-ზე

ზავდანნია:მიიღეთ ის ისე, რომ წითელი მძივი იყოს ლურჯი და მწვანე უკან, ქვემოთ ჩამოთვლილი წესების დარღვევის გარეშე:

HTML მარკირების შეცვლა შეუძლებელია
შეუძლებელია ელემენტებში z-ინდექსის შეცვლა/დამატება
შეუძლებელია ელემენტების პოზიციონირების შეცვლა/დამატება

გადაწყვეტილება:

გამოსავალი მდგომარეობს იმაში, რომ პირველს (წითლის მამას) ერთზე ოდნავ ნაკლები ხედვა მივცეთ.
css ღერძი, რომელიც ამას ასახავს:
div:first-child (გაუმჭვირვალობა: .99; )

ჰმ, აქ საქმეები კარგად არ მიდის. რამდენად შორს წავიდა აქ გაგება? როგორ შეიძლება ელემენტების გაერთიანება სიდიდის რიგითობით? შენ თვითონ ასე ფიქრობ? გიწვევთ კლუბში!
იმედი მაქვს, სტატისტიკის მეორე ნაწილს ყველაფერი თავის ადგილზე ექნება.

ელემენტების გამოყენების თანმიმდევრობა:

Z- ინდექსი, როგორც ჩანს, უფრო მიმტევებელია: რაც უფრო მაღალია მნიშვნელობა, მით უფრო ახლოს იქნება ჩვენთან ელემენტი. z-ინდექსი 5-ის მქონე ელემენტი გადაფარავს ელემენტს z-index 2-თან, რისი ბრალია? Სიმართლეს არ შეესაბამება.
ეს არის z-index პრობლემა. ეს ყველაფერი ისე აშკარად ჩანს, რომ მომხმარებელთა უმეტესობა საკმარის ყურადღებას არ აქცევს საკვებს.

ნებისმიერი ელემენტი HTML დოკუმენტში შეიძლება იყოს წინა პლანზე ან ფონზე. ეს ყველამ იცის. წესები, რომლებიც განსაზღვრავს ამ წესრიგს, ნათლად არის აღწერილი სპეციფიკაციაში, მაგრამ, როგორც უკვე ვთქვი, ყველას არ ესმის ისინი სრულად.

იმის გამო, რომ z- ინდექსის ძალა და პოზიციონირება აშკარად არ არის მითითებული, ყველაფერი მარტივია: დაწესების თანმიმდევრობა HTML-ში პირდაპირი ელემენტების თანმიმდევრობის მსგავსია. (სინამდვილეში, ყველა წვრილმანი უფრო იკეცება, თუ თქვენ არ იყენებთ შეყვანის უარყოფით მნიშვნელობებს მცირე ელემენტების დასაბლოკად, თქვენ არ აღმოჩნდებით უკიდურესი ვარდნით)

თუ თქვენ აშკარად უთხარით ელემენტებს (და მათ შვილებს) პოზიციონირება, ეს ელემენტები გადაფარავს ელემენტებს პოზიციონირების სიმძლავრის მკაფიოდ მითითების გარეშე. (ისინი ამბობენ: "თქვენ აშკარად მიუთითებთ პოზიციონირებაზე" - ვგულისხმობ ნებისმიერ მნიშვნელობის პატივისცემას, გარდა სტატიკურისა, მაგალითად, აბსოლუტურად ან აუცილებლად).

I, nareshti, vypadok, თუ z-index of tasks. დასაწყისისთვის, ბუნებრივია ვივარაუდოთ, რომ უფრო დიდი z-ინდექსის მქონე ელემენტები აღემატება უფრო მცირე z-ინდექსის მქონე ელემენტებს და რომ ნებისმიერი ელემენტი ჩასმული z-ინდექსით იქნება უფრო მაღალი ვიდრე ელემენტი ჩასმული z-ის გარეშე. ინდექსი, მაგრამ ეს ასე არ არის. პირველ რიგში, z-ინდექსი დამოკიდებულია მხოლოდ მკაფიოდ განლაგებულ ელემენტებზე. თუ თქვენ ცდილობთ დააყენოთ z-ინდექსი არაპოზიციურ ელემენტზე, არაფერი მოხდება. სხვა გზით, z- ინდექსის მნიშვნელობებს შეუძლიათ შექმნან კონტექსტური გადახურვები. ჰმ, ყველაფერი გაცილებით გართულდა, არა?

გადაფარვის კონტექსტი

ელემენტები ფონიდან, რომლებიც გადადიან წინა პლანზე ან ფონზე, ერთდროულად განიხილება, როგორც გადაფარვის კონტექსტი. გადაფარვის კონტექსტის გაგება არის გასაღები z- ინდექსისა და გადაფარვის ელემენტების თანმიმდევრობის გასაგებად.

გადაფარვის კანის კონტექსტი არის მისი ძირეული ელემენტი HTML სტრუქტურაში. ელემენტზე ახალი კონტექსტის ჩამოყალიბების მომენტში, ყველა ბავშვის ელემენტი თავად მოიხმარს ამ კონტექსტს და თავის ადგილს იკავებს გადახურვის თანმიმდევრობით. თუ ელემენტი ნაჩვენებია ერთი გადაფარვის კონტექსტის ბოლოში, მაშინ არავითარ შემთხვევაში წარმოუდგენელი ან წარმოუდგენელი არ არის მისი ჩვენება სხვა ელემენტის ზემოთ მიმდინარე გადაფარვის კონტექსტში, რომელიც მდებარეობს იერარქიის ზემოთ, აქედან გამომდინარეობს ინსტალაციის ზარმაცი z- ინდექსი. მილიონის ტოლია.

ახალი კონტექსტი შეიძლება ჩამოყალიბდეს ასეთ სიტუაციებში:

რა ელემენტია დოკუმენტის ძირეული ელემენტი (ელემენტი)
იმის გამო, რომ პოზიციონირების ელემენტი არ არის სტატიკური და მისი z-ინდექსის მნიშვნელობა არ არის იგივე რაც ავტო
თუ ელემენტს აქვს 1-ზე ნაკლები სიცხადე

გამარჯობა, ბლოგის საიტის თანამემამულე მკითხველებო! ზოგჯერ თავს უფლებას ვაძლევ, დავამატო მასალები საგანძურში და დღეს ვისაუბრებთ z-index-ის ძალაზე, რომელიც გავლენას ახდენს ელემენტების პოზიციონირებაზე ვებ გვერდზე.

მნიშვნელოვანია გვესმოდეს, რომ ეს წესი ვრცელდება მხოლოდ პოზიციურ ტეგებზე, რომლებზეც ძალა ენიჭება. ეს არ ეხება დოკუმენტის სტანდარტულ ნაკადს (პოზიციონირება არ არის მითითებული ან პარამეტრი დაყენებულია სტატიკური). ქვემოთ მე წარმოგიდგენთ z-index რობოტს კონკრეტულ აპლიკაციაზე.

როგორ z-ინდექსი ნიშნავს ელემენტის პოზიციას

ასევე, CSS კანის ელემენტისთვის, ვებ გვერდზე მისი ადგილის პოვნა შეესაბამება ახალი სტილის აღწერილობებს. ყველა ბლოკის როტაცია სათითაოდ განისაზღვრება დამატებითი კოორდინატთა სისტემის გამოყენებით.

წინა ხედში, ხაზგასმული წერტილი მდებარეობს სანახავი არეალის ზედა მარცხენა კუთხეში (ბრაუზერის ფანჯარა). ამ შემთხვევაში, X და Y ღერძი მიუთითებს იმ ადგილს, სადაც ელემენტები გადაადგილდებიან მონიტორის ეკრანის ზონაში. და მთელი Z ღერძი, როგორც თქვენ მელოდიური გამოიცანით, საშუალებას გაძლევთ შექმნათ სივრცითი კოორდინატთა სისტემა.

ის პერპენდიკულარულად არის გამოძერწილი X და Y მიერ წარმოქმნილ სიბრტყეზე და პირდაპირ ჩვენკენ არის მიმართული. ნათელია, რომ წერტილი Z ღერძის გასწვრივ არის ნული. ნულოვან წერტილში ამოღებულია ყველა სტატიკური ელემენტი, რომელსაც ენიჭება სიმძლავრის პოზიცია სტატიკური (ნორმალური პოზიციონირება).

დასასრულს, რადგან პოზიცია საერთოდ არ არის მითითებული, მაშინ ეს სიტუაცია აბსოლუტურად ექვივალენტურია, თუ მითითებული იყო სტატიკური პარამეტრი. ამ შემთხვევაში, HTML გვერდის ყველა ელემენტის ჩვენება ნაჩვენებია სტანდარტულ ნაკადში. ამრიგად, პოზიცია, მაგალითად, და float (შექმნილი მცურავი ელემენტები CSS ინფორმაციაში) შესაძლებელს ხდის შეცვალოს ძირითადი მონახაზი განლაგების კონკრეტული მოთხოვნების დასაკმაყოფილებლად.

იმისდა მიუხედავად, რომ სტატიკური ვებ ელემენტებისთვის z მნიშვნელობები ნულის ტოლია, ისე, რომ სუნი იზრდება X-Y ზონაში, მათთვის წესები განისაზღვრება ისე, როგორც სუნი იწყებს ერთზე გადახურვას.

მთავარი წესია: ვებ ელემენტი, რომელიც მითითებულია ტეგით, რომელიც ნაჩვენებია ქვემოთ გვერდის HTML კოდში, ჩვენთან ყველაზე ახლოს იქნება. შემდეგ შეგვიძლია გადავკვეთოთ ცხოველთა ბლოკი, რომლის კოდიც უფრო ცნობილია.

ამასთან, აშკარად განლაგებული (დინამიური) ელემენტები (მნიშვნელობებით შედარებითი, აბსოლუტური, ფიქსირებული) უფრო სავარაუდოა, ვიდრე სტატიკური. იგივე კანონი მოქმედებს დინამიურ ვებ ელემენტებს შორის: კოდში ყველაზე ნაკლები მოდიფიკაციის მქონე ის ჩვენთან ყველაზე ახლოსაა (სხვაზე მეტი).

ღერძი აქ არის და ჩვენ შეგვიძლია ვთქვათ უდიდესი სიტყვა სიმძლავრის z-ინდექსი. რაც უფრო მაღალია რიცხვითი გამონათქვამის მნიშვნელობა, მით უფრო მაღალი იქნება ვებსაიტის ელემენტი. მაგრამ ყველაფერი მუშაობს, როგორც უკვე ვთქვი, მხოლოდ აბსოლუტური, ფარდობითი და ფიქსირებული პოზიციების მქონე ელემენტებთან. z-index პარამეტრების სინტაქსი ასეთია:

Z-ინდექსი: ნომერი | ავტო | მემკვიდრეობით

რიცხვითი მნიშვნელობები შეიძლება იყოს: როგორც უარყოფითი, ასევე დადებითი, ნულის ჩათვლით. ავტო პარამეტრი განსაზღვრავს ვებ ელემენტების რეორგანიზაციის ავტომატურ თანმიმდევრობას HTML კოდში მათი სისრულის მიხედვით, რაც უზრუნველყოფს მათ მამის კუთვნილებას. მემკვიდრეობის მნიშვნელობა გვიჩვენებს, რომ ბატკოვსკის z-ინდექსი.

ახლა დროა მივმართოთ ჩვენს კვლევას პრაქტიკული მიმართულებით, რათა დავადასტუროთ თეორიული გამოთვლები. მე დავიკავებ სამ პოზიციას კონდახისთვის (მიკუთვნებული ძალაუფლების პოზიციიდან: ნათესავი). უფრო ზუსტად, მე მივუთითებ კანის ფერს და ჩარჩოს, ასევე მივუთითებ კიდეს (მარცხნივ) და ზედა (ზემოდან), სიგანე (სიგანე) და სიმაღლე (სიმაღლე):

ვებ გვერდზე, ბრაუზერის მიერ HTML კოდის ინტერპრეტაციის შემდეგ, სამი ბლოკი ასე გამოიყურება:

გთხოვთ გაითვალისწინოთ, რომ კონტეინერები განლაგებულია სრულიად განსხვავებულად, ზოგადი წესის შესაბამისად: ქვედა ლურჯი გადაფარავს წითელს, რომელიც ოდნავ უფრო დიდია, ხოლო ერთი, თავისთავად, კიდევ უფრო მწვანეა. და ახლა ჩვენ დავამატებთ z- ინდექსის ძალას გულის 1 ბლოკის მნიშვნელობებს:

სურათის შეცვლა:

ფაქტობრივად, წითელი კონტეინერის ღირებულება ამოღებულია და ღვინოები ახლა უფრო ღირებულია, ვიდრე სხვები. შემდეგ ჩვენ შევეცდებით z-ინდექსი დავამატოთ იმავე მწვანე ბლოკში და ასევე მნიშვნელობებზე 2:

შედეგი იქნება ასეთი:

სრულიად აშკარაა, რომ ახლა არის მწვანე კონტეინერი, რომელიც ართმევს Z- ინდექსის უდიდეს მნიშვნელობას. ამ გზით ყველაფერი საფუძვლიანად დადასტურდა პრაქტიკული კვლევებით. მნიშვნელოვანია გვახსოვდეს, რომ z-index-ის ძალა მუშაობს მხოლოდ აშკარად განლაგებულ ვებ ელემენტებთან.

The z-ინდექსი CSS-ის ძალა დააწკაპუნოთ z-წესრიგის განლაგებულ ელემენტზე და მის შთამომავლებზე ან მოქნილ ელემენტებზე. გადააბრუნეთ ელემენტები დიდი z-ინდექსის საფარით, რომლებიც უფრო პატარაა.

ამ ინტერაქტიული მაგალითის წყარო ინახება GitHub საცავში. მოგეხსენებათ, პროექტის აპლიკაციების გაფართოებისთვის, გაიმეორეთ კლონირება https://github.com/mdn/interactive-examples და აირჩიეთ დამატებითი ჩანაწერები.

განლაგებული უჯრისთვის (ანუ ნებისმიერი პოზიციით, გარდა სტატიკური), z-index თვისება განსაზღვრავს:

Rhubarb ყუთი მანქანა in-line stacking კონტექსტში.
ჩვენი ყუთი ადგენს ლოკალური დაწყობის კონტექსტს.

Სინტაქსი

/* საკვანძო სიტყვის მნიშვნელობა */ z-index: auto; /* მნიშვნელობები */z-ინდექსი: 0; z-ინდექსი: 3; z-ინდექსი: 289; z-ინდექსი: -1; /* უარყოფითი მნიშვნელობები პრიორიტეტის შესამცირებლად */ /* გლობალური მნიშვნელობები */ z-ინდექსი: მემკვიდრეობა; z-ინდექსი: საწყისი; z-ინდექსი: დაუყენებელი;

Z-ინდექსის თვისება მითითებულია როგორც საკვანძო სიტყვა ან .

ღირებულებები

ავტოყუთს არ აქვს დადგენილი ახალი ადგილობრივი დაწყობის კონტექსტი. გენერირებული ყუთი ხრახნიანი დაწყობის კონტექსტში იგივეა, რაც მისი მშობლის ყუთი. ეს რა უნდა გავაკეთოთ არის ყველა რიცხვის დაყენება, დადებითი ან უარყოფითი. მთელი რიცხვები შეიძლება გამოყენებულ იქნას მრავალ CSS პარამეტრებში, როგორიცაა სვეტების რაოდენობა, მრიცხველის ზრდა, ბადე-სვეტი, ბადე-სტრიქონი და z-ინდექსი."> არის გენერირებული ყუთის სტეკის დონე დაწყობის მიმდინარე კონტექსტში. ყუთს ასევე აქვს ადგილობრივი ჩანაწერები კონტექსტში, რომელშიც მისი მასშტაბი არის 0. მნიშვნელოვანია, რომ z- ინდექსების შთამომავლები არ იყოს შედარებული ელემენტების z- ინდექსებთან.

ფორმალური სინტაქსი

ავტომატური CSS მონაცემთა ტიპი არის სპეციალური ტიპი რა უნდა გავაკეთოთ არის ყველა რიცხვის დაყენება, დადებითი ან უარყოფითი. მთელი რიცხვები შეიძლება გამოყენებულ იქნას მრავალ CSS პარამეტრებში, როგორიცაა სვეტების რაოდენობა, მრიცხველის ზრდა, ბადე-სვეტი, ბადე-სტრიქონი და z-ინდექსი.">

მაგალითები

HTML

წყვეტილი ყუთი ოქროს ყუთი მწვანე ყუთი

CSS

.დატეხილი ყუთი ( პოზიცია: ფარდობითი; z-ინდექსი: 1; საზღვარი: წყვეტილი; სიმაღლე: 8em; ზღვარი-ქვედა: 1em; ზღვარი-ზედა: 2em; ) .ოქროს ყუთი (პოზიცია: აბსოლუტური; z-ინდექსი: 3 /* დააყენე .ოქროს ყუთი ზემოთ .მწვანე ყუთი და .დატეხილი ყუთი */ ფონი: ოქრო; სიგანე: 80%; მარცხნივ: 60 პიქსელი; ზედა: 3მ; ) .მწვანე ყუთი (პოზიცია: აბსოლუტური; z-ინდექსი 2; /* ჩადეთ

შედეგი

სპეციფიკაციები

სპეციფიკაცია	სტატუსი	კომენტარი
CSS გადასვლები "ანიმაციის ქცევა z-ინდექსისთვის" მითითებულია სპეციფიკაციაში.	სამუშაო პროექტი	განსაზღვრავს z- ინდექსს, როგორც ანიმაციურს.
CSS დონე 2 (რევიზია 1) "z-ინდექსი" შედის ამ სპეციფიკაციაში.	რეკომენდაცია	საწყისი განმარტება

Საწყისი ღირებულება	ავტო
Ვრცელდება	განლაგებული ელემენტები
Მემკვიდრეობით მიღებული	არა
მედია	ვიზუალური
გამოთვლილი მნიშვნელობა	როგორც მითითებულია
ანიმაციის ტიპი	CSS მონაცემთა ტიპი ინტერპოლირებულია მთელი რიცხვის დისკრეტული ნაბიჯებით. სპექტრი საშუალებას იძლევა, რადგან სუნი იყო რეალური, მცურავი წერტილიანი რიცხვები და დისკრეტული მნიშვნელობა მიიღება იატაკის ფუნქციის გამოყენებით.">მთელი რიცხვი.
კანონიკური წესრიგი	ფორმალური გრამატიკით განსაზღვრული უნიკალური არაორაზროვანი წესრიგი
ქმნის დაწყობის კონტექსტს	დიახ

ბრაუზერის თავსებადობა

ამ გვერდზე ცხრილის კომპაქტურობა გენერირებულია სტრუქტურირებული მონაცემებიდან. როგორც კი გაიგებთ, თქვენი მონაცემების გასარკვევად დააწკაპუნეთ https://github.com/mdn/browser-compat-data-ზე და დაწერეთ.

განაახლეთ თავსებადობის მონაცემები GitHub-ზე

	სამუშაო მაგიდა						მობილური
	Chrome	ზღვარი	Firefox	Internet Explorer	ოპერა	Safari	ანდროიდის ვებ-ხედვა	Chrome Android-ისთვის	Firefox ანდროიდისთვის	ოპერა ანდროიდისთვის	Safari iOS-ზე	სამსუნგის ინტერნეტი
z-ინდექსი	Chrome სრული მხარდაჭერა 1	Edge სრული მხარდაჭერა 12	Firefox სრული მხარდაჭერა 1	IE სრული მხარდაჭერა 4	Opera სრული მხარდაჭერა 4	Safari სრული მხარდაჭერა 1
უარყოფითი ღირებულებები	Chrome სრული მხარდაჭერა 1	Edge სრული მხარდაჭერა 12	Firefox სრული მხარდაჭერა 3	IE სრული მხარდაჭერა 4	Opera სრული მხარდაჭერა 4	Safari სრული მხარდაჭერა 1	WebView Android სრული მხარდაჭერა დიახ	Chrome Android სრული მხარდაჭერა დიახ	Firefox Android-ის სრული მხარდაჭერა 4	Opera Android სრული მხარდაჭერა დიახ	Safari iOS სრული მხარდაჭერა დიახ	Samsung Internet Android სრული მხარდაჭერა დიახ

CSS უფლებამოსილებების უმეტესობა მარტივია. ყველაზე ხშირად, რომელიმე მათგანის სტაგნაცია მარკირების ელემენტამდე იძლევა ცუდ შედეგს - თქვენ უბრალოდ უნდა შეცვალოთ მხარე, როგორც ხედავთ სტაგნაციის ეფექტს. თუმცა, არსებობს ძალაუფლების აქტები, რომლებიც რთულია და საუკეთესოდ მუშაობს სხვადასხვა სიტუაციებში.

z-ინდექსის ძალა ვრცელდება სხვა ჯგუფზე, რომელიც უდავოდ მოითხოვს მეტი sum'yatyat, იქნება ეს სხვაგვარად. ბედის ირონიით, თუმცა გვესმის, რომ z-index არის ძალიან მარტივი და ხშირად ეფექტური გზა განლაგების მრავალი პრობლემის გადასაჭრელად.

ამ სტატიაში განვიხილავთ რა არის z-index, რა პრობლემები აქვს მას ზოგადად და ასევე განვიხილავთ როგორ გამოვიყენოთ იგი. მოდით ასევე შევხედოთ განსხვავებას, თუ როგორ ამუშავებენ მას ბრაუზერები, განსაკუთრებით Internet Explorer-ისა და FireFox-ის უახლეს ვერსიებში.

რა ძალაა ეს?

z-ინდექსის სიმძლავრე მიუთითებს სტეკზე განლაგების დონეზე, html ელემენტის სიღრმეზე. „გლიბინის დონე“ ნიშნავს ელემენტის პოზიციას Z ღერძის გასწვრივ (როგორც ეკრანის X და Y ღერძების პერპენდიკულარული). რაც უფრო მაღალია z-ინდექსის მნიშვნელობა, მით უფრო დიდი იქნება ელემენტი.

ბუნებრივად შერეული ელემენტები

მეორეს მხრივ, ელემენტების თავდაპირველი განლაგება (მე პატივს ვცემ Z ღერძის ბრუნვას) განისაზღვრება მთელი რიგი ფაქტორებით. ქვემოთ მოცემულია ამ ფაქტორების სია, დაწყებული ყველაზე დაბალი ელემენტებით. ეს სია ითვალისწინებს, რომ თითოეულ ელემენტს აშკარად არ აქვს z-ინდექსის ძალა.

ფონი არის საზღვარი ელემენტებს შორის, რომელიც აღნიშნავს სტეკის კონტექსტს.
ელემენტები ნეგატიური სტეკის კონტექსტით, როგორიცაა ანარეკლი.
განლაგებული (პოზიცია: სტატიკური), ისევე როგორც მცურავი სიმძლავრის გარეშე (float: none) ბლოკის ელემენტები (ჩვენება: ბლოკი) ჩვენების თანმიმდევრობით.
არაპოზიციონირებული, დამონტაჟებული მცურავი სიმძლავრისგან, ბლოკის ელემენტები, გარეგნობის მიხედვით.
მწკრივი (ხაზოვანი) ელემენტები გარეგნობის მიხედვით.
ძალაუფლების პოზიციის დამყარების ელემენტები, როგორიცაა რეფლექსია.

z- ინდექსის სიმძლავრის სწორად დაყენება შეიძლება ბუნებრივად შეიცვალოს სტეკში.

რა თქმა უნდა, დასტაში ელემენტების თანმიმდევრობა აშკარა არ არის, სანამ არ დაგჭირდებათ ელემენტების ერთმანეთის ზემოთ ჩვენება. ელემენტების ძირითადი წესრიგის შესანარჩუნებლად, კონდახზე გარე კიდეები უფრო დაბალია.

ამ ელემენტებს აქვთ განსხვავებული ფერები ფონზე და მათ შორის, ხოლო დანარჩენი ორი გადაადგილება დადგენილი უარყოფითი სიმძლავრის ზღვრის ზომისთვის. ეს მოწყობა გვიჩვენებს ელემენტების ბუნებრივ განლაგებას, საფეხურის კანი მდებარეობს "უფრო მეტად" წინა უკან. ამ ელემენტებს აქვთ z-ინდექსი სიმძლავრის კომპლექტი და მათი დაწყობის თანმიმდევრობა ბუნებრივია.

სად შეიძლება იყოს პრობლემები?

მოდით შევხედოთ ყველაზე პოპულარულ პრობლემას საცალო მომხმარებლებში. სწორი ის არის, რომ z-ინდექსის სიმძლავრე ეხება მხოლოდ ელემენტებს, რომლებისთვისაც პოზიციის სიმძლავრე დაყენებულია აბსოლუტურ, ფიქსირებულ ან ფარდობით.

ამის საჩვენებლად, ჩვენ შეგვიძლია დავინახოთ ეს სამი ელემენტი, ისევე როგორც z- ინდექსის დადგენილი სიმძლავრე, ასე რომ თქვენ შეგიძლიათ სცადოთ შეცვალოთ თითოეული Z ღერძის ბრუნვის რიგი.

დააყენეთ ნაცრისფერი ელემენტის z-ინდექსი 9999-ზე, ლურჯი 500-ზე და ყავისფერი 1-ზე. ლოგიკურია აღინიშნოს, რომ თანმიმდევრობა შეიცვლება. მაგრამ ეს არავის სასარგებლოდ არ არის, გონების უკან დარჩენილი ძალაუფლების პოზიცია ჯერ კიდევ სტატიკურია.

დენის პოზიციის ნათესავში დაყენებით, გასაოცარია რა მოხდა:

ახლა კი ყველაზე საოცარი შედეგი გვაქვს. ელემენტების თანმიმდევრობა შეიცვალა, ნაცრისფერი ელემენტი ზევითაა, ყავისფერი კი ბოლოში.

Სინტაქსი

z- ინდექსის სიმძლავრე გამოიყენება როგორც ბლოკის ელემენტებზე, ასევე პატარაებზე (inline). მნიშვნელობები შეიძლება იყოს დადებითი ან უარყოფითი რიცხვები, ან მწარმოებლებისთვის მნიშვნელობები არის ავტო. განტოლების მნიშვნელობა ნიშნავს, რომ ელემენტი იმავე დონეზეა, როგორც მისი მამა.

ქვემოთ მოცემულია CSS მესამე მაგალითისთვის, ასე რომ, z- ინდექსის სიმძლავრე სწორად არის დაყენებული:

#grey_box ( სიგანე: 200px; სიმაღლე: 200px; კონტური: მყარი 1px #cccc; ფონი: #ddd; პოზიცია: შედარებითი; z-ინდექსი: 9999; ) #ლურჯი_ყუთი ( სიგანე: 200px; სიმაღლე: 200px; კონტური: 4a7497; ფონი : #8daac3; პოზიცია: ფარდობითი; z-ინდექსი: 500; ) #ოქროს_ყუთი (სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; კონტური: მყარი 1px #8b6125; ფონი: #ba945d; ;)

და კიდევ ერთხელ ვიმეორებ, განსაკუთრებით მათთვის, ვინც ახალია CSS-ისთვის: z-ინდექსის სიმძლავრე არ არის მოქმედი მანამ, სანამ არ დააყენებთ დენის პოზიციას.

Wikostannya JavaScript-ში

თქვენ შეგიძლიათ გამოიყენოთ z-ინდექსის ძალა დინამიურად JavaScript-ის გამოყენებით. სინტაქსი ორიგინალის მსგავსია CSS ავტორიტეტების უმეტესობისთვის, აქლემის აღნიშვნა გამოიყენება CSS ავტორიტეტებში დეფისის ჩასანაცვლებლად.

Var myElement = document.getElementById("ოქროს_ყუთი"); myElement.style.position = "ნათესავი"; myElement.style.zIndex = "9999";

IE და FireFox-ში დანერგვა არასწორია

ზოგიერთ ვერსიაში, IE6, IE7 და FireFox 2, არის z-index სიმძლავრის არასწორი განხორციელება.

აირჩიეთ ელემენტი IE6-ში

Internet Explorer 6-ში შერჩეული ელემენტი არის Windows კონტროლის ქვეშ, რათა ყოველთვის იყოს ნაჩვენები ყველა ელემენტის თავზე, უგულებელყოფს პირველადი განლაგების წესრიგს, ასევე პოზიციის სიმძლავრეს და z-ინდექსის. პრობლემა ნაჩვენებია ქვემოთ:

შერჩეული ელემენტი პირველად ჩნდება დოკუმენტში, მისი z-ინდექსის მნიშვნელობა უდრის 1-ს და მისი ჩასმის პოზიცია შედარებითია. div ნაჩვენებია შერჩევის შემდეგ და მისი z-ინდექსი არის "9999". შედეგად, div უნდა გადაფაროს არჩევანს, რაც სხვა ბრაუზერებში არ არის:

აირჩიეთ წელი - 2009 2010 2011

თუ ამ სტატიას IE6-ის მიღმა უყურებთ, შეამჩნევთ, რომ div დაყენებულია არჩევაზე.

IE6-ის ეს შესწორება დიდი პრობლემაა ჩამოსაშლელი მენიუებისთვის, თუ ისინი პასუხისმგებელნი არიან არჩეული ელემენტის გადაფარვაზე. გადაწყვეტილებებს შეუძლიათ გამოიყენონ JavaScript, რათა დაუყოვნებლივ შეარჩიონ არჩევა - და შემდეგ, მენიუს გამოჩენის შემდეგ, კვლავ აჩვენონ. სხვა გადაწყვეტილებებმა შეიძლება გამოიყენონ iframe.

პოზიციონირებული მამები IE6/IE7-ში

Internet Explorer 6 და 7 ვერსიები არასწორად აყენებენ სტეკის კონტექსტს უახლოეს პოზიციონირებულ მამასთან. ამის საჩვენებლად, ჩვენ კვლავ შევქმნით ორ განყოფილებას. ეს, რა თქმა უნდა, პირველი ელემენტია მათ შორის პოზიციონირებისთვის.

ნაცრისფერი ელემენტი z-ინდექსი არის 9999, ლურჯი ელემენტი არის 1, ორი ელემენტი განლაგებულია. ამიტომ, თუ სწორად განხორციელდა, ნაცრისფერი ელემენტი გამოჩნდება ლურჯის თავზე.

თუ ამ მხარეს გახსნით IE6 ან IE7, დაინახავთ, რომ ლურჯი ელემენტი გადაფარავს სერიას. ეს მიიღწევა იმავე ელემენტის სხვა div-ით შეფუთვით, რომლის პოზიცია დაყენებულია შედარებით.

ხშირია ბრაუზერების მიერ პოზიციონირებულ ელემენტებზე სტეკის კონტექსტის „გადაყრა“ ზიანის მიყენების გარეშე. ნაცრისფერ ელემენტს უფრო მაღალი z-ინდექსი აქვს, ხოლო ლურჯ ელემენტს აქვს უფრო დაბალი z-ინდექსი, ასე რომ, შეიძლება უკეთესი გამოჩნდეს. ბრაუზერის გადაწყვეტილებებთან დაკავშირებით ასეთი პრობლემა არ არის.

უარყოფითი მნიშვნელობები FireFox 2-ისთვის

FireFox 2-ში უარყოფითი z-ინდექსის მქონე ელემენტები განლაგებულია სტეკის კონტექსტის ქვეშ, ნაცვლად იმისა, რომ იყვნენ ფონის ზემოთ და იმ ელემენტებს შორის, რომლებიც ქმნიან სტეკის კონტექსტს. კონდახი შეგიძლიათ იხილოთ სურათზე:

ქვემოთ მოცემულია html ვერსია

როგორც ხედავთ, ნაცრისფერი ელემენტის ფონი (რომელიც ქმნის სტეკის კონტექსტს) არის ლურჯის ქვემოთ, ხოლო ტექსტი (რომელიც ნაცრისფერი ელემენტის ხაზოვანი ელემენტია) არის მის ზემოთ, რომელიც შეესაბამება ბუნებრივი დაჩრდილვის წესებს. , ზემოთ აღწერილი.

წაისვით vikoristannya

თავდაპირველ სტატიაში vikoristan jakosti-ის უამრავი აპლიკაციაა. პატიოსნად, როგორც ჩანს, დიდი ძალისხმევაა თარგმნა, ძირითადად სკრინშოტი, პატარა კომენტარი და პოსტი. თუ ჯერ კიდევ გჭირდებათ, მაშინ ვხედავ, რომ დაწერის დროა.

მოკლე ინფორმაცია

CSS ვერსიები

CSS 1	CSS 2	CSS 2.1	CSS 3

აღწერა

ვებ გვერდზე ნებისმიერი განლაგებული ელემენტი შეიძლება გადაიტანოს ერთი და იგივე თანმიმდევრობით, რაც ქმნის მესამე ხედს, ეკრანზე პერპენდიკულარულად. კანის ელემენტი შეიძლება განთავსდეს ვებ გვერდის სხვა ობიექტების უკან ან ქვედა ან მაღლა, მათი განთავსება z-ღერძის გასწვრივ კონტროლდება z-ინდექსით. ეს ძალა ვრცელდება მხოლოდ ელემენტებზე, რომელთა პოზიციის მნიშვნელობები დაყენებულია აბსოლუტურ, ფიქსირებულ ან ფარდობით.

Სინტაქსი

z-ინდექსი: ნომერი ავტო | მემკვიდრეობით

მნიშვნელობა

რა მნიშვნელობა აქვს მთელ რიცხვებს (დადებითი, უარყოფითი და ნული). რაც უფრო დიდია მნიშვნელობა, მით უფრო დიდია ალბათობა იმისა, რომ ელემენტი გასწორდეს იმ ელემენტებთან, რომლებიც ნაკლებად აფერხებენ. იგივე z-ინდექსის მნიშვნელობით, წინა პლანზე არსებული ელემენტი არის HTML აღწერილობის კოდის ქვემოთ მოცემული ელემენტი. მიუხედავად იმისა, რომ სპეციფიკაცია იძლევა z- ინდექსის უარყოფითი მნიშვნელობების გამოყენების საშუალებას, ასეთი ელემენტები არ არის ნაჩვენები Firefox ბრაუზერში 2.0 ვერსიის ჩათვლით.

გარდა რიცხვითი მნიშვნელობებისა, ელემენტების თანმიმდევრობა დაყენდება ავტომატურად, მათი პოზიციიდან HTML კოდში და მათი კუთვნილების მშობელთან, და ზოგიერთ შვილო ელემენტს აქვს იგივე ნომერი, რაც მთავარი ელემენტი. მემკვიდრეობის ღირებულება გვიჩვენებს, რომ მამა კლებულობს.

HTML5 CSS2.1 IE Cr Op Sa Fx

z-ინდექსი

ბურთი 1 მხეცი

ბურთი 1

ბურთი 2

ბურთი 4 მხეცი

ბურთი 3

ბურთი 4

ამ კონდახის შედეგი ნაჩვენებია ნახ. 1.

Პატარა 1. Z-ინდექსი

ობიექტის მოდელი

document.getElementById("elementID").style.zIndex

ბრაუზერი

ტეგის მიღმა შემოქმედების სია