Web tasarımında bir elementi sayfa üzerinde doğru konumlandırmak, hem görsel düzen hem de kullanıcı deneyimi açısından kritik öneme sahiptir. CSS’te bu işlemi position özelliği ile yaparız. Bu yazıda, CSS position türlerini sade bir dille açıklayacak ve aralarındaki farkları net şekilde ortaya koyacağız.

CSS Position: A Quick Guide

CSS’te position özelliği beş farklı değer alır:

• static
• relative
• absolute
• fixed
• sticky

Şimdi her birini detaylıca inceleyelim.

1️⃣ position: static;

Varsayılan değerdir.
Element, belgenin normal akışına (normal flow) göre konumlandırılır.

Ne anlama gelir?

• Tarayıcı elementi HTML sırasına göre yerleştirir.
• top, right, bottom, left gibi konum özellikleri çalışmaz.
• Özel bir konumlandırma yapılmaz.

Ne zaman kullanılır?

Genellikle müdahale etmeye gerek olmadığında kullanılır çünkü zaten tüm elementler varsayılan olarak statictir.

div {
  position: static;
}

2️⃣ position: relative;

Element normal konumuna göre kaydırılır, fakat kapladığı orijinal alan korunur.

Ne anlama gelir?

• Element normal akışta kalır.
• top, left gibi değerlerle yerinden oynatılabilir.
• Ancak boşluğu sayfada durmaya devam eder.

Yani element görsel olarak hareket eder ama diğer elementler onun eski yerini boş kabul etmez.

Ne zaman kullanılır?

• Küçük konum ayarlamaları yaparken
• İçindeki absolute elementlere referans noktası vermek için

div {
  position: relative;
  top: 10px;
  left: 20px;
}

3️⃣ position: absolute;

Element normal akıştan çıkarılır ve en yakın konumlandırılmış (position değeri static olmayan) üst elemana göre yerleştirilir.

Ne anlama gelir?

• Artık belge akışında yer kaplamaz.
• Diğer elementler onu yokmuş gibi davranır.
• En yakın relative, absolute veya fixed atanmış parent’a göre konumlanır.
• Eğer böyle bir parent yoksa, sayfaya (body) göre konumlanır.

Ne zaman kullanılır?

• Açılır menüler
• Tooltip
• Modal içerikler
• Kart içi özel konumlandırmalar

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

4️⃣ position: fixed;

Element normal akıştan çıkar ve tarayıcı penceresine (viewport) göre sabitlenir.

Ne anlama gelir?

• Scroll yapılsa bile yerinde kalır.
• Ekrana sabitlenir.
• Diğer elementler onu yokmuş gibi davranır.

Ne zaman kullanılır?

• Sabit header
• Sabit footer
• WhatsApp destek butonu
• Scroll top butonu

button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

5️⃣ position: sticky;

Element normal şekilde scroll olur ancak belirlenen noktaya geldiğinde yapışır (stick).

Ne anlama gelir?

• Başta normal akışta hareket eder.
• Belirlenen top, left gibi değere ulaştığında sabitlenir.
• Parent container sınırları içinde çalışır.

Ne zaman kullanılır?

• Sabitlenen başlıklar
• Kategori filtre menüleri
• Tablo başlıkları

header {
  position: sticky;
  top: 0;
}

Tüm Position Türlerinin Karşılaştırması

En Sık Yapılan Hatalar

❌ Absolute çalışmıyor

Muhtemelen parent elemente position: relative; verilmemiştir.

❌ Sticky çalışmıyor

• top değeri verilmemiş olabilir.
• Parent’ta overflow: hidden; olabilir.
• Parent’ın yüksekliği yeterli değildir.

Sonuç

CSS position özelliği, sayfa düzenini kontrol etmenin temel taşlarından biridir.

• Basit akış için → static
• Küçük kaydırmalar için → relative
• Tam konumlandırma için → absolute
• Ekrana sabitlemek için → fixed
• Scroll sırasında yapışma efekti için → sticky

Doğru kullanıldığında modern ve profesyonel arayüzler oluşturmak çok daha kolay hale gelir.