CSS-də elementlərin yerləşdirilməsinin müxtəlif…

static - Standart mövqe. Element sənədin normal axınına uyğun olaraq yerləşdirilir. top, right, bottom, left xüsusiyyətləri təsir etmir.
relative - Element normal axında öz mövqeyinə nisbətən yerləşdirilir. top, right, bottom, left xüsusiyyətləri elementi orijinal mövqeyindən hərəkət etdirir, lakin tutduğu yer axında saxlanılır.
absolute - Element tamamilə sənədin normal axımından çıxarılır. Onun mövqeyi top, right, bottom, left xüsusiyyətləri ilə ən yaxın yerləşdirilmiş ata (müvafiq position dəyərləri ilə) əsasən müəyyən edilir. Əgər belə ata yoxdursa, mövqe <html> başlanğıc blokuna görə müəyyən edilir.
fixed - Element tamamilə sənədin normal axımından çıxarılır. Onun mövqeyi top, right, bottom, left xüsusiyyətləri ilə baxış pəncərəsinə (viewport) əsasən müəyyən edilir. Element səhifə aşağı sürüşdürülərkən yerində qalır.
sticky - Element relative kimi yerləşdirilir, ta ki, aşağı sürüşdürmə zamanı təyin olunmuş mövqeyə (top, right, bottom, left) çatana qədər, sonra isə fixed olur.

Fərqlər cədvəli:

Xüsusiyyət	`static`	`relative`	`absolute`	`fixed`	`sticky`
Sənəd axını	Adi	Saxlayır	Silinir	Silinir	Əvvəl adi, sonra silinir
Hərəkət (`top` və s.)	Yox	Özünə nisbətən	Ata/viewport-a nisbətən	Viewport-a nisbətən	Özünə, sonra viewport-a nisbətən
Sürüşdürmə zamanı	Sürüşür	Sürüşür	Yerində qalır (əgər ata `fixed`dirsə) və ya ata ilə sürüşür	Yerində qalır	Əvvəl sürüşür, sonra yerində qalır

Nümunə:

.static-box {
  position: static; /* Standart mövqe */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Normal mövqedən aşağıya sürüşdürmə */
  left: 20px; /* Normal mövqedən sağa sürüşdürmə */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Ata mövqeləndirilmiş */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Konteynerə görə */
  left: 50px; /* Konteynerə görə */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Görünüm pəncərəsinə görə */
  right: 10px; /* Görünüm pəncərəsinə görə */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Yuxarıya yapışır */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Üst-üstə keçmə üçün */
}

CSS-də elementlərin yerləşdirilməsinin müxtəlif üsulləri arasındakı fərq nədir?