CSS'de öğelerin konumlandırılmasında farklı yöntemler…

static - Varsayılan konumlandırma. Öğenin belge akışına göre konumlandırılır. top, right, bottom, left özellikleri etkili değildir.
relative - Öğenin normal akış içindeki konumu ile göre konumlandırılır. top, right, bottom, left özellikleri öğeyi orijinal konumundan kaydırır, ancak kapladığı alan akışta korunur.
absolute - Öğenin belge akışından tamamen çıkarılır. Konumu, en yakın konumlandırılmış ata (position: relative, absolute, fixed veya sticky) göre belirlenir. Eğer böyle ata yoksa, konum <html> başlangıç bloğuna göre belirlenir.
fixed - Öğenin belge akışından tamamen çıkarılır. Konumu, görünüm alanına (viewport) göre belirlenir. Öğenin sayfa kaydırılırken yerinde kalmasını sağlar.
sticky - Öğenin konumu relative gibi ayarlanır, ta ki kaydırma sırasında belirli konuma ulaşana kadar (top, right, bottom, left ile belirlenir). Bu noktadan sonra konumu fixed olur.

Farklılık tablosu:

Özellik	`static`	`relative`	`absolute`	`fixed`	`sticky`
Belge akışı	Normal	Korur	Kaldırılır	Kaldırılır	Önce normal, sonra kaldırılır
Kaydırma (`top` vb.)	Yok	Kendine göre	Ata/viewport'a göre	Viewport'a göre	Kendine, sonra viewport'a göre
Kaydırırken	Kayar	Kayar	Sabit kalır (eğer ata `fixed` ise) veya ata göre kayar	Sabit kalır	Önce kayar, sonra yerinde kalır

Örnek:

.static-box {
  position: static; /* Varsayılan konum */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Normal konumdan aşağı kaydırma */
  left: 20px; /* Normal konumdan sağa kaydırma */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Konumlandırılmış ata */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Kapsayıcıya göre */
  left: 50px; /* Kapsayıcıya göre */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Görünüm alanına göre */
  right: 10px; /* Görünüm alanına göre */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Görünüm alanının üstüne yapışır */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Üst üste bindirme için */
}

CSS'de öğelerin konumlandırılmasında farklı yöntemler arasındaki fark nedir?