მიმდინარე დრო:0:00მთლიანი ხანგრძლივობა:2:13

ვიდეოს აღწერა

გიჩვენებთ CSS-ის მდებარეობისა და z-ინდექსის მაგალითს ბუნებაში: Google Maps. ალბათ უმეტესობას თქვენგან გამოუყენებია Google Maps, ან რაიმე მსგავსი რუკების სერვისი რათა გეპოვნათ რასაც ეძებდით. ეს სერვისები ძალიან მაგარია. შეგვიძლია ვათვალიეროთ, გავზარდოთ გამოსახულება, შორიდან შევხედოთ ზედაპირს, მოვძებნოთ რაღაცები. მე ახლა ბარსელონაში ვარ. მოვძებნი Sagrada Familia-ს, რომელიც მშვენიერი ეკლესიაა.. ეს რეალურად HTML, CSS და JavaScript არის. გიჩვენებთ ყველა z-ინდექსს რაც აქ არის. განსხვავებული ელემენტები, რასაც ვხედავთ, CSS-ის საშუალებით ერთმანეთის თავზეა მოთავსებული. ისინი იყენებენ z-ინდექსს სპეციფიური გზით, რათა მათი თანმიმდევრობა გარანტირებულად სწორი იყოს. გამოვიყენებ ჩემს Chrome console-ს და გიჩვენებთ რაღაცებს. ამ მინი-რუკას კუთხეში აქვს - position:absolute; bottom: 0px; left: 0px; და z-ინდექსი უდრის ერთს. ესეიგი ეს მას მოათავსებს რაღაცის ზემოთ, რომელის z-ინდექსი ნულია. ამ ბარათს, რომელიც ჩნდება და რაღაც შესაძლებლობებს გვიჩვენებს, გააჩნია position: fixed და z-ინდექსი უდრის ათს. ესეიგი ეს ბარათი მრავალი რამის ზემოდან ჩნდება. გამოსახულების გაზრდის ღილაკის z-ინდექსია ორი, რაც იმას ნიშნავს, რომ ის ამ ბარათის ქვეშ აღმოჩნდება. გადმოვიტანოთ ეს აქ და ვნახოთ რა მოხდება. ხედავთ? ეს ბარათი ახლა zoom-ის ღილაკის ზემოთ გაჩნდა, რადგან მისი z-ინდექსი ოთხია, ღილაკის კი - ორი. როგორც ხედავთ, Google Maps ფართოდ იყენებს CSS მდებარეობას და z-ინდექსს, რათა მთელი რუკა გაშალოს და მაკონტროლებლები ზემოდან მოათავსოს. სხვა სახის CSS და JavaScript-იცაა გამოყენებული, მაგრამ კარგია რომ შეგიძლიათ დაიწყოთ იმის გააზრება, თუ როგორაა სხვა ვებგვერდები აწყობილი, რომლებიც საერთოდ არ ჰგვანან იმ ვებგვერდებს, რომლებიც აქამდე ვიხილეთ. ესაა CSS-ის ძალა.