ახლა ჩვენ ვისწავლით, როგორ გამოვიყენოთ CSS
ელემენტების გადაადგილებისთვის.
არა უბრალოდ ერთმანეთის გვერდით დასალაგებლად,
არამედ ერთმანეთის მიყოლებით
ერთი მეორეს შემდეგ დასაწყობად.
აქ გვაქვს ვებ-გვერდი
რამდენიმე სათაურითა და სურათებით და
კიდევ გვაქვს რამდენიმე აბზაცი
ეს ყველაფერი ახლა განლაგებულია
სტანდარტული წყობის მიხედვით.
რასაც ძირითადად იყენებს ბრაუზერი.
ჩვენ მას სტატიკურ ან ჩვეულებრივ განლაგებას ვუწოდებთ,
რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,
მაგალითად, სურათები,
განლაგებულია მარცხნიდან მარჯვნივ
ბლოკები კი, ისეთები, როგორც
სათაურები(ჰედერები) და აბზაცები
განლაგებულია ზემოდან ქვემოთ.
შეგვიძლია, შევცვალოთ განლაგების სტრატეგია
CSS-ის პოზიციონირების თვისების გამოყენებით
მოდი ვცადოთ ეს ამ სურათის მაგალითზე.
დავწეროთ: position:
და შემდეგ მნიშვნელობად მივუთითოთ relative
relative განლაგების სტრატეგია
ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ
შემდეგ კი რაღაც მანძილით დავაშოროთ
ახლა მივუთითოთ ბრაუზერს,
რა მანძილით გვინდა დაშორება
ამისთვის უნდა გამოვიყენოთ
CSS-ის ოთხი ახალი თვისების კომბინაცია
ზედა, ქვედა, მარცხენა და მარჯვენა.
მაგალითად, გვინდა დავაშოროთ
ოცი პიქსელით ქვემოდან
და კიდევ ათით...
დავუშვათ, ათით მარცხნიდან.
კარგია, არა?
მაგრამ კიდევ უფრო მაგარი რამე
შემიძლია გაჩენოთ.
კერძოდ, აბსოლუტური განლაგება.
ეს შეგვიძლია გამოვიყენოთ
თუ გვინდა ამოვიღოთ ელემენტი სტანდარტული წყობიდან
და ეკრანზე რომელიმე სხვა ადგილას დავსვათ.
ამისთვის
შევცვალოთ relative მნიშვნელობა
ჩავწეროთ absolute
მაგრამ დავტოვოთ
ზემოთა და მარცხენა თვისებები
როგორც ხედავთ
ახლა ჩვენი სურათი
ფარავს როგორც სხვა სურათებს, ასევე ჰედერს.
ეს არ გვაწყობს, გამოვასწოროთ.
დავიწყოთ უინსტონით.
დავამატოთ მისთვის წესი
position: absolute
და, დავუშვათ,
ზემოდან 40 პიქსელი
არა, 50 იყოს
და 50 მარცხნივ
აი, ახლა კარგია.
ჰუპერსაც უნდა ზემოთ
ამიტომ
მასაც მივანიჭოთ
position: absolute
თვისებები: top: 30
left:70
ჩემი მიზანია
ჩანდეს ისე, თითქოს ჰუპერი
უინსტონის ირგვლივ ცეკვავს.
მაგრამ ჯერ–ჯერობით კომპოზიცია ასე არ გამოიიყურება
იმიტომ რომ უინსტონი
ჰოპერის ზემოდან ხატია.
ამის გამოსასწორებლად
შემიძლია ან შევცვალო
სურათების თეგების თანმიმდევრობა
HTML-ში
მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები
CSS–ის z ინდექსის გამოყენებით
შეგვიძლია ვუთხრათ ბრაუზერს
რა თანმიმდევრობით
უნდა ჩახატოს ელემენტები
ამისთვის მათ სხვაობის
ინდექსები უნდა მიანიჭოს.
დავიწყოთ ლანდშაფტით.
მისი z ინდექსი იქნება 1
უინსტონის - 2
ჰოპერის – 3
კარგია!
ახლა ჰოპერი უინსტონის წინ ცეკვავს
მოსწონს ეს თუ არა
უწევს;
ახლა ვნახოთ, რა შეიძლება ვუყოთ დამალულ
ჰედერებსა და სვეტებს
აბა..
მინდა, რომ ეს ცეკვა
ყველაფერზე მაღლა იყოს განლაგებული
ამიტომ მივანიჭებ
აბსოლურ პოზიციას
და z ინდექს 4–ს
კარგია.
ასე ათი პიქსელით მარცხნივ რომ გადავიტანოთ
ან კიდევ ოდნავ მეტით
აჰა, ასე კარგია.
ახლა სიმღერის ტექსტს მივადგეთ.
მინდა, რომ ის ყველაფრის
ქვემოთ ჩანდეს უბრალოდ.
ამიტომ, მივანიჭოთ
შედარებითი პოზიცია
და დავაყენოთ ზედა ზღვარი
რომელიც სურათის სიმაღლეს
უნდა უდრიდეს;
რაც 220 პიქსელია
მშვენიერია, მომწონს, როგორც გამოვიდა
მშვენიერი წვეულება
მოგვიწყვია.
ახლა თუ დააპაუზებთ ვიდეოს
და ჩამოწევთ გვერდს
დაინახავთ, რომ ყველაფერი
ერთად მოძრაობს
მნიშვნელოვანი კი ის არის,
რომ აბსოლუტური პოზიცია დამოკიდებულია
გვერის ზემოთა ზღვარზე
ამიტომ, როცა გვერდს სქროლავთ
ყველაფერი, რაც ზემოთ იყო
ნელ–ნელა ქრება,
იმიტომ რომ თქვენ შორდებით
გვერდის ზემოთა ნაწილს
მეორე ვარიანტია
ფიქსირებული პოზიცია,
ამ შემთხვევაში გამოჩნდება თითქოს
არაფერი არ მოძრაობს საერთოდ
თუ გინდათ სცადოთ,
უბრალოდ შეცვალეთ
h1 აბსოლუტურიდან ფიქსირებულზე
მერე კი დააპაუზეთ და ჩამოსქროლეთ
დაინახავთ, რომ
ჩვენი წვეულება იმავე ადგილას რჩება
იმიტომ რომ ახლა ის დამოკიდებულია
ეკრანის ზედა ზღვარზე,
ბრაუზერის ფანჯარაზე.
აი, ასევ ისწავლეთ
სამი სხვადასხვა პოზიციის გამოყენება.
და შეგვიძლია ბევრი მაგარი რამის გაკეთება
შეიძლება გაინტერესებთ,
როდის ვიყენებთ აბსოლუტურ და ფიქსირებულ პოზიციებს?
ჰმ.. მაგალითად,
თამაშის შექმნისას
როგორც აქ გავაკეთე ეს
როცა სცენის ყველა ნაწილის
გამოჩენა გინდათ ბრაუზერში
მაგრამ ასევე გამოიყენეთ
ჩვეულებრივი ვებ–გვერდებისთვის
მაგალითად, ხანის აკადემიაზე
იმ მოდულებისთვის, გვერდის შუაში რომ ხტება
აბსოლუტურ პოზიციას ვიყენებთ.
ფიქსირებულს კი ვიყენებთ
ძებნის ველისთვის ზოგ გვერდზე
რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო მისი გამოყენება
პოზიციები შეიძლება არ გამოიყენო
ყოველ გვერდზე
მაგრამ როცა გამოიყენებ,
ძალიან გაგიხარდება მათი არსებობა.