პოზიციონირება დამონტაჟებული ელემენტები კასკადური სტილების ცხრილებით
ერთი გამოწვევა, როდესაც გამოყენებით CSS პოზიციონირების ვებ გვერდზე განლაგება არის ის, რომ ზოგიერთი თქვენი ელემენტები შეიძლება გადახურვა სხვები. ეს კარგად მუშაობს, თუ გსურთ ბოლო ელემენტის HTML იყოს თავზე, მაგრამ რა მოხდება, თუ არა ან რა, თუ გინდა ელემენტები, რომ ამჟამად არ გადააფაროთ სხვები ამის გაკეთებას, რადგან დიზაინი მოუწოდებს ამ "ფენიანი" სახეს ? იმისათვის, რომ შეიცვალოს გზა ელემენტები გადახურვა თქვენ უნდა გამოვიყენოთ ქონების CSS.
თუ თქვენ იყენებთ გრაფიკული ინსტრუმენტების გამოყენებას Word და PowerPoint ან უფრო ძლიერი image რედაქტორი, როგორიცაა Adobe Photoshop, მაშინ შანსი თქვენ ნახეთ რაღაც z-index in action. ამ პროგრამებში შეგიძლიათ გამოაჩინოთ ობიექტი (ებ) ის, რომლითაც შეგეხეთ და აირჩიე ვარიანტი "უკან დაბრუნება" ან "შემოტევამდე" თქვენი დოკუმენტის გარკვეული ელემენტები. Photoshop- ში არ გაქვთ ეს ფუნქციები, მაგრამ თქვენ გაქვთ "Layer" Pane- ის პროგრამა და შეგიძლიათ მოაწესრიგოთ სადაც ამ ელემენტების გადანაცვლებისას ელემენტში შედის ტილო. ორივე ამ მაგალითში, თქვენ არსებითად შექმნით ამ ობიექტების z- ინდექსი.
რა არის z- ინდექსი?
როდესაც თქვენ იყენებთ CSS პოზიციონირების პოზიცია ელემენტების გვერდზე, თქვენ უნდა ვიფიქროთ სამი ზომები. არსებობს ორი სტანდარტული ზომები: მარცხენა / მარჯვენა და ზედა / ქვედა. მარცხნიდან მარჯვნივ ინდექსი ცნობილია როგორც x- ინდექსი, ხოლო ზედა-ქვედა ერთი არის y- ინდექსი. ეს არის თუ როგორ ჰორიზონტალურად ან ვერტიკალურად შეავსებ ამ ორ ინდექსს.
ვებ-დიზაინის შემთხვევაში, ასევე არის გვერდითა განლაგება. თითოეულ ელემენტს გვერდზე შეიძლება იყოს ფენიანი ზემოთ ან ქვემოთ ნებისმიერი სხვა ელემენტს. Z- ინდექსი ქონების განსაზღვრა, სადაც დასტის თითოეულ ელემენტს. თუ x- ინდექსი და y- ინდექსი არის ჰორიზონტალური და ვერტიკალური ხაზები, მაშინ z- ინდექსი არის სიღრმე გვერდი, არსებითად მე -3 განზომილება.
მე მინდა ვფიქრობ ელემენტებზე ვებგვერდზე, როგორც ცალი ქაღალდი და ვებ გვერდი , როგორც კოლაჟი. სადაც მე დავწერე ქაღალდი განისაზღვრება პოზიციონირებით და რამდენად ბევრია დაფარული სხვა ელემენტებით z- ინდექსი.
Z- ინდექსი არის რიცხვი, ან დადებითი (მაგალითად 100) ან უარყოფითი (მაგ .100). ნაგულისხმევი z- ინდექსი არის 0. ყველაზე მაღალი z- ინდექსი ელემენტის ზედა ნაწილშია, შემდეგ კი შემდეგი ყველაზე მაღალია და ასე დაბალი z- ინდექსით. თუ ორი ელემენტის აქვს იგივე z- ინდექსი მნიშვნელობა (ან ის არ არის განსაზღვრული, რაც იმას ნიშნავს, გამოყენების ნაგულისხმები ღირებულება 0) ბრაუზერი იქნება ფენის მათთვის, რათა ისინი გამოჩნდება HTML.
როგორ გამოვიყენოთ z- ინდექსი
მიეცით თითოეულ ელემენტს, რომელიც გინდა თქვენს სტეკზე სხვადასხვა z- ს მნიშვნელობით. მაგალითად, თუ ხუთი განსხვავებული ელემენტები მაქვს:
- ელემენტის 1 - z- ინდექსი -25
- ელემენტი 2 - z- ინდექსი 82
- ელემენტი 3 - z- ინდექსი არ არის მითითებული
- ელემენტი 4 - z- ინდექსი 10
- ელემენტის 5 - z- ინდექსი -3
ისინი დააყრიან შემდეგ ბრძანებას:
- ელემენტი 2
- ელემენტი 4
- ელემენტი 3
- ელემენტი 5
- ელემენტი 1
ვურჩევ გამოყენებით სხვადასხვა z- ინდექსი ღირებულებების დასტის თქვენი ელემენტები. ამ გზით, თუ გვერდს მოგცემთ უფრო მეტი ელემენტის შემდეგ, თქვენ გაქვთ ოთახში, რათა ყველა სხვა ელემენტის z- ინდექსი ღირებულებების შეცვლის გარეშე. მაგალითად:
- 100 ჩემი საუკეთესო ყველაზე ელემენტისთვის
- 0 ჩემი შუა ელემენტისთვის
- -100 ჩემი ქვედა ელემენტისთვის
ასევე შეგიძლიათ ორ ელემენტს იგივე z- ინდექსი მნიშვნელობა მისცეს. თუ ეს ელემენტები stacked, ისინი არიან ბრძანებით ისინი წერილობითი HTML, ერთად ბოლო ელემენტს თავზე.
ერთი შენიშვნა, იმისათვის, რომ ეფექტურად გამოიყენოთ z- ის ინდექსი, ეს უნდა იყოს ბლოკის დონის ელემენტი ან გამოვიყენოთ "ბლოკის" ან "inline- ბლოკის" ჩვენება თქვენს CSS- ში.
ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირება 12/09/16 by ჯერემი ჟარარდ.