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

static - ნაგულისხმევი პოზიცია. ელემენტი პოზიციონირებს დოკუმენტის სტანდარტული ნაკადის შესაბამისად. თვისებები top, right, bottom, left არ ახდენს გავლენას.
relative - ელემენტი პოზიციონირებს მისი ნორმალური პოზიციის მიხედვით. თვისებები top, right, bottom, left გადაადგილებს მას მისი საწყისი პოზიციიდან, მაგრამ მისი დაკავებული ადგილი ნაკადში რჩება.
absolute - ელემენტი სრულად იხსნება ნორმალური ნაკადისგან. მისი პოზიცია განისაზღვრება თვისებებით top, right, bottom, left ყველაზე ახლო პოზიციონირებულ მშობელთან მიმართებით (რომელსაც აქვს position: relative, absolute, fixed ან sticky). თუ ასეთი მშობელი არ არსებობს, პოზიცია განისაზღვრება <html>-ის საწყის ბლოკთან მიმართებით.
fixed - ელემენტი სრულად იხსნება ნორმალური ნაკადისგან. მისი პოზიცია განისაზღვრება თვისებებით top, right, bottom, left ეკრანის (viewport) მიმართ. ელემენტი რჩება ადგილზე გვერდის სლაივის დროს.
sticky - ელემენტი პოზიციონირებს როგორც relative, სანამ სლაივის დროს არ მიაღწევს მითითებულ პოზიციას (top, right, bottom, left), ამის შემდეგ მისი პოზიცია ხდება fixed.

განსხვავებების სია:

თვისება	`static`	`relative`	`absolute`	`fixed`	`sticky`
დოკუმენტის ნაკადი	ჩვეულებრივი	ინარჩუნებს	იხსნება	იხსნება	თავდაპირველად ჩვეულებრივი, შემდეგ იხსნება
გადატანა (`top` და სხვა)	არა	საკუთარი თავისთან მიმართებით	მშობელთან/ვიუპორტთან მიმართებით	ვიუპორტთან მიმართებით	საკუთარი თავისთან, შემდეგ ვიუპორტთან მიმართებით
სლაივის დროს	სლაივდება	სლაივდება	რჩება ადგილზე (თუ მშობელი `fixed`) ან სლაივდება მშობელთან ერთად	რჩება ადგილზე	თავდაპირველად სლაივდება, შემდეგ რჩება ადგილზე

მაგალითი:

.static-box {
  position: static; /* ნაგულისხმევი პოზიცია */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* ზევით გადატანა */
  left: 20px; /* მარჯვნივ გადატანა */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* მშობელი */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* კონტეინერის მიმართ */
  left: 50px; /* კონტეინერის მიმართ */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* ვიუპორტის მიმართ */
  right: 10px; /* ვიუპორტის მიმართ */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* მიმაგრებულია ვიუპორტის ზედა ნაწილთან */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* სხვა ელემენტების გადაფარვა */
}

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