პოზიციები

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

სტატიკური პოზიცირება

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

.element {
  position: static;
}

რელაციური პოზიცირება

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

.element {
  position: relative;
}

თუ ელემენტს მივანიჭებთ position-ის (გარდა static-ის) თვისებას შეგვიძლია მასზე დამატებითი პოზიციის სტილების გამოყენება:

• top - განსაზღვრავს ელემენტის ზემოდან დაშორებას მისი მშობელი ელემენტის, საკუთარი თავის, ან ხედვის არიდან (viewport), იმის მიხედვით, თუ როგორი position აქვს ელემენტს.
• right – განსაზღვრავს ელემენტის მარჯვენიდან დაშორებას.
• bottom – განსაზღვრავს ქვემოდან დაშორებას.
• left – განსაზღვრავს მარცხნიდან დაშორებას.

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

<div class="normal">
  <span>სტატიკური პოზიცირება</span>
</div>
<div class="relative">
  <span>რელაციური პოზიცირება</span>
</div>
<div class="normal">
  <span>სტატიკური პოზიცირება</span>
</div>

div {
  width: 50%;
  border: 1px solid black;
  padding: 10px;
}

div.normal {
  position: static; /* არ არის საჭირო თუმცა მაგალითისთვის */
}

div.relative {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: steelblue;
  color: white;
}

პოზიცირების ელემენტის გასწორებაზე შეგიძლიათ ნებისმიერი საზომი ერთეული გამოიყენოთ.

აბსოლუტური პოზიცირება

აბსოლუტური პოზიცირების დროს, ელემენტი სრულიად ამოვარდნილია დოკუმენტის ნაკადიდან. მისი პოზიციონირება შესაძლებელია უახლოესი მშობელი ელემენტის მიხედვით, რომელიც რელაციურად არის პოზიციონირებული.

შევცვალოთ იგივე მაგალითში relative მნიშვნელობა absolute-ით.

<div class="normal">
  <span>სტატიკური პოზიცირება</span>
</div>
<div class="absolute">
  <span>აბსოლუტური პოზიცირება</span>
</div>
<div class="normal">
  <span>სტატიკური პოზიცირება</span>
</div>

div {
  width: 50%;
  border: 1px solid black;
  padding: 10px;
}

div.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: steelblue;
  color: white;
}

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

თუ მის მშობელ ელემენტებში სადმე იქნება გამოყენებული რელაციური პოზიცირება, აბსოლუტურად პოზიიონირებული ელემენტის თვისებები top, right, bottom და left მნიშვნელობებს მიიღებს სწორედ ამ მშობელ ელემენტთან მიმართებაში. სხვა შემთხვევაში, ელემენტი პოზიციონირებული იქნება viewport-თან მიმართებაში.

განვიხილოთ მეორე მაგალითი რელაციური პოზიცირების გამოყენებით:

<div class="parent">
  <div class="square"></div>
  <div class="circle"></div>
</div>

div {
  padding: 10px;
  border: 1px solid black;
}

div.parent {
  position: relative;
  background-color: yellow;
}

div.parent div.square {
  width: 100px;
  height: 100px;
  background-color: green;
}

div.parent div.circle {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  border-radius: 50%;
  background-color: red;
}

ამ შემთხვევაში წითელი წრე მოთავსდა ყვითელ ყუთში, დაშორებებიც top: 50px და left: 50px ზუსტად ამ მშობელი ელემენტისგან მიიღო, რადგან მას ეწერა position: relative.

z-index

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

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

<div class="parent">
  <div class="square"></div>
  <div class="circle"></div>
</div>

div {
  padding: 10px;
  border: 1px solid black;
}

div.parent {
  height: 150px;
  position: relative;
  background-color: yellow;
}

div.parent div.square {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
}

div.parent div.circle {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  border-radius: 50%;
  background-color: red;
}

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

შევცვალოთ ოთხკუთხედის z-index-ი 1-ზე:

<div class="parent">
  <div class="square"></div>
  <div class="circle"></div>
</div>

div {
  padding: 10px;
  border: 1px solid black;
}

div.parent {
  height: 150px;
  position: relative;
  background-color: yellow;
}

div.parent div.square {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  z-index: 1;
}

div.parent div.circle {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 85px;
  border-radius: 50%;
  background-color: red;
}

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

თუ გამოვიყენებთ -1-ს ელემენტი მოთავსედება ნაკადის მიღმა.

ფიქსირებული პოზიცია

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

ამ მაგალითში header ელემენტს გააჩნია position: fixed, z-index: 10-ით. ვებსაიტებზე ხშირად ვხვდებით ფიქსირებულ ჰედერებს!

Sticky პოზიცია

არსებობს კიდევ ერთი პოზციის მნიშვნელობა, სახელად position: sticky, რომელიც შედარებით ახალია. ეს ფაქტობრივად ჰიბრიდია relative-სა და fixed პოზიციონირებებს შორის. იგი საშუალებას აძლევს ელემენტს თავდაპირველად მოიქცეს, როგორც რელაციურად პოზიციონირებულს (relative), მაგრამ როცა ის მიაღწევს გარკვეულ ზღვარს (მაგალითად, ხედვის არიდან 10 პიქსელამდე დაშორებას ზემოდან), მაშინ გადაიქცევა ფიქსირებულად (fixed).

შეჯამება

ამ თავში ჩვენ განვიხილეთ CSS-ის პოზიციონირების მექანიზმები, როგორებიცაა static, relative, absolute, fixed და sticky. ვისწავლეთ, როგორ გამოვიყენოთ top, right, bottom და left სტილები ელემენტების ზუსტი განლაგებისთვის, როგორ მოქმედებს z-index გადაფარვის თანმიმდევრობაზე და როგორ ავირჩიოთ სწორი პოზიციონირების სტრატეგია კონკრეტული სიტუაციისთვის.