CSS position: relative, absolute, sticky ve fixed

CSS position özelliği, bir öğenin sayfada nasıl konumlandığını ve top, right, bottom, left (ve inset) gibi değerlerin ona uygulanıp uygulanmadığını belirleyen temel araçtır. Çoğu kafa karışıklığı, bu beş değerin (static, relative, absolute, fixed, sticky) birbirinden tam olarak nasıl ayrıldığının bilinmemesinden doğar. Bu yazıda her birini gerçek örneklerle, çalışan kod parçalarıyla netleştiriyorum.

position: static — varsayılan davranış

Her öğe, sen başka bir şey yazmazsan position: static ile gelir. Statik öğeler normal akışta dizilir: blok öğeler alt alta, satır içi öğeler yan yana. En önemli ayrıntı şudur: statik bir öğeye top, left gibi ofset değerleri etki etmez. Aynı şekilde z-index de işlemez.

.kutu {
  position: static; /* varsayılan */
  top: 50px; /* hiçbir etkisi yok */
}

Yani bir öğeyi kaydırmak istiyorsan, ilk adım onu statik olmaktan çıkarmaktır.

position: relative — kendine göre kayma

relative, öğeyi normal akışta tutar ama ona ofset uygulamana izin verir. Ofsetler öğenin kendi orijinal konumuna göre hesaplanır. Önemlisi: öğe kaysa bile, akıştaki yeri korunur — yani komşu öğeler sanki o hâlâ eski yerindeymiş gibi davranır, boşluk bırakılmaz.

.rozet {
  position: relative;
  top: -8px;
  left: 12px;
}

relative'in en sık kullanılan ikinci işlevi ise görünmez bir rol üstlenmesidir: içindeki absolute öğeler için bir referans (konumlandırma bağlamı) oluşturur. Çoğu zaman bir kutuya position: relative verirsin de hiç ofset yazmazsın; tek amacın çocuk öğeleri ona göre hizalamaktır.

position: absolute — akıştan çıkarma

absolute öğeyi normal akıştan tamamen çıkarır; artık komşuları için yer kaplamaz. Konumu, en yakın konumlandırılmış atadan (yani position değeri static olmayan en yakın üst öğeden) hesaplanır. Böyle bir ata yoksa referans, ilk kapsayıcı bloğa (genellikle viewport / <html>) düşer.

Klasik kalıp şudur: dışa relative, içe absolute.

.kart {
  position: relative;
}
.kart .etiket {
  position: absolute;
  top: 8px;
  right: 8px;
}

Burada .etiket, kartın sağ üst köşesine yapışır. .kart'a relative vermeseydin, etiket sayfanın en yakın konumlandırılmış atasına göre uçup giderdi. Bu yüzden "absolute öğem yanlış yere gidiyor" sorununun cevabı neredeyse her zaman: doğru ataya relative vermeyi unutmuşsundur.

top + bottom birlikte verilip yükseklik belirtilmezse öğe dikeyde gerilir.
inset: 0 kısayolu, dört kenarı da 0 yaparak öğeyi atasını tamamen kaplayacak şekilde uzatır.

position: fixed — viewport'a sabitleme

fixed de öğeyi akıştan çıkarır, ama referansı her zaman viewport'tur (atası değil). Sayfa kaydırılsa bile öğe ekrandaki yerinde kalır. Sabit gezinme çubukları, "yukarı çık" düğmeleri ve çerez bildirimleri için idealdir.

.geri-bildirim {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}

Tek kritik istisna: bir atada transform, filter veya perspective gibi bir özellik tanımlıysa, o ata yeni bir "containing block" oluşturur ve fixed öğe viewport yerine o ataya göre sabitlenir. Beklenmedik şekilde kayan bir fixed öğen varsa, üst öğelerinde bir transform olup olmadığını kontrol et.

position: sticky — relative ile fixed arası

sticky, ikisinin melezidir. Öğe önce relative gibi normal akışta durur; sen kaydırdıkça, belirttiğin eşik değere (örneğin top: 0) ulaştığında fixed gibi yapışıp kalır. Kapsayıcısının sonuna gelindiğinde ise tekrar serbest bırakılır.

.bolum-basligi {
  position: sticky;
  top: 0;
  background: #fff;
}

sticky çalışmıyorsa en sık üç sebep vardır:

Eşik eksik: top, bottom, left veya right'tan en az birini vermen şart; yoksa hiç yapışmaz.
Üst öğede overflow: bir atada overflow: hidden/scroll/auto varsa, sticky o kapsayıcının kaydırma bağlamına bağlanır ve beklediğin gibi davranmaz.
Yetersiz alan: sticky öğe yalnızca kendi kapsayıcısı boyunca yapışık kalır; kapsayıcı kısaysa etki çok kısa sürer.

z-index ve yığılma bağlamı

z-index yalnızca konumlandırılmış öğelerde (yani static dışındaki tüm değerlerde) ve flex/grid çocuklarında işler. Daha yüksek z-index öğeyi üste taşır — ama bu yalnızca aynı yığılma bağlamı (stacking context) içinde geçerlidir. transform, opacity (1'den küçük), filter gibi özellikler yeni bir yığılma bağlamı yaratır; bu yüzden bazen z-index: 9999 bile bir öğeyi yukarı çıkaramaz: öğe, daha düşük öncelikli bir bağlamın içine hapsolmuştur.

Hangi değeri ne zaman?

Sadece ufak bir kaydırma mı lazım, akış korunsun mu? → relative
Bir öğeyi başka bir öğenin köşesine yerleştireceksen → ataya relative, öğeye absolute
Kaydırmadan bağımsız ekrana sabit kalsın mı? → fixed
Kaydırınca yapışsın ama bölüm bitince bıraksın mı? → sticky

Sık Sorulan Sorular

absolute ile fixed arasındaki fark nedir?

İkisi de öğeyi normal akıştan çıkarır. absolute en yakın konumlandırılmış ataya göre yerleşir ve sayfayla birlikte kayar; fixed ise viewport'a göre yerleşir ve sayfa kaydırılsa bile ekranda sabit kalır.

sticky neden hiç yapışmıyor?

En sık iki sebep: bir eşik değer (top/bottom gibi) vermemiş olman, ya da bir üst öğede overflow: hidden veya overflow: auto bulunması. İkincisi sticky'yi sessizce devre dışı bırakır.

z-index neden çalışmıyor?

Genellikle öğe static olduğu için (önce bir konumlandırma değeri ver) veya öğe, daha düşük öncelikli bir yığılma bağlamının içinde sıkıştığı için. Üst öğelerde transform, opacity veya filter olup olmadığına bak.

Arayüzün konumlandırma yüzünden bozuluyor mu? Sticky başlıklar, açılır menüler ve katman sorunlarını birlikte düzene sokabiliriz. Bir projen varsa benimle iletişime geç.