CSS-ში ელემენტების პოზიციონირების რა ვარიანტებია?

CSS-ში არსებობს რამდენიმე ძირითადი ვარიანტი ელემენტების პოზიციონირებისთვის:

• static — დეფოლტური პოზიცია. ელემენტები განლაგებულია დოკუმენტის ნაკადში, ცვლილებების გარეშე.
• relative — ელემენტი პოზიციონირებულია მისი ნორმალური პოზიციის მიმართ. შეიძლება გადაადგილდეს top, left, bottom, right-ით, ამავდროულად ის ინარჩუნებს ადგილს ნაკადში.
• absolute — ელემენტი პოზიციონირებულია ყველაზე ახლოს მდებარე არა static მშობელთან მიმართებით (ან ფანჯარასთან, თუ ასეთი არ არის). ელემენტი გამოდის ნაკადიდან.
• fixed — ელემენტი ფიქსირდება ბრაუზერის ფანჯარასთან და არ მოძრაობს სქროლვის დროს. ასევე გამოდის ნაკადიდან.
• sticky — ელემენტი როგორც relative იქცევა, სანამ არ მიაღწევს განსაზღვრულ პოზიციას სქროლვის დროს, შემდეგ როგორც fixed.

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

• Flexbox — მოქნილი მოდელი ერთ განზომილებაში ელემენტების განლაგებისა და განაწილებისთვის (ხაზი ან სვეტი).
• Grid — ორმხრივი ქსელური მოდელი, რომელიც საშუალებას აძლევს ელემენტებს განლაგდეს სვეტებში და სვეტებში.
• float — მოძველებული მეთოდი, რომელიც გამოიყენებოდა ელემენტების გარშემოწერილობისთვის, ადრე გამოიყენებოდა სვეტების შექმნისთვის, ახლა ნაკლებად გამოიყენება.

მაგალითი position-ის გამოყენების:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}