Tailwind CSS ile Konumlandırma (Position): Absolute, Relative, Fixed ve Sticky

Web tasarımında elementler normalde bir akış (flow) içindedir; biri biter, diğeri başlar. Ancak bazen bir "İndirim" etiketini ürün resminin üzerine yapıştırmak, bir menüyü sayfanın tepesine çivilemek veya bir "Yukarı Çık" butonunu ekranın sağ altına sabitlemek istersiniz.

İşte bu noktada Position (Konumlandırma) devreye girer. Tailwind CSS, bu karmaşık CSS kurallarını çok basit sınıflara indirger. Gelin bu sınıfları derinlemesine inceleyelim.

1. Static (Varsayılan Durum)

HTML elementlerinin doğal halidir. Bir elemente özel bir pozisyon vermezseniz static davranır.

• Sınıf: static
• Özellik: top, left, z-index gibi özellikler bu elementlerde çalışmaz.

2. Relative (Göreceli Konumlandırma)

Bu sınıf, elementin akıştaki yerini korur ancak top, left gibi komutlarla kendi yerinden kıpırdamasına izin verir.

• Sınıf: relative
• Asıl Gücü: Genellikle kendisi hareket etmek için değil, içindeki Absolute çocukları sınırlamak (hapsetmek) için Kapsayıcı (Parent) olarak kullanılır.

3. Absolute (Mutlak Konumlandırma)

Elementi sayfanın normal akışından tamamen koparır. Artık diğer elementleri itmez, onların üstünde veya altında "uçan" bir katman gibi davranır.

• Sınıf: absolute
• Kritik Kural: Absolute olan bir element, nereye göre konumlanacağını bilmek ister.
  • Eğer ebeveyninde relative varsa, ebeveynin sınırlarına göre konumlanır.
  • Eğer ebeveyninde relative YOKSA, sayfanın en tepesine (body) göre konumlanır.

Örnek Senaryo: Resim Üzerine Etiket Koymak Bir ürün kartımız var ve sağ üst köşesine "Yeni" etiketi koymak istiyoruz.

<div class="relative w-64 h-64 bg-gray-200">
  <img src="urun.jpg" alt="Ürün" class="w-full h-full object-cover">

  <span class="absolute top-0 right-0 bg-red-500 text-white text-xs px-2 py-1">
    YENİ
  </span>
</div>

Burada relative sınıfını kaldırırsanız, "YENİ" yazısı kutunun içinden çıkıp sayfanın en sağ üst köşesine yapışacaktır.

4. Fixed (Sabit Konumlandırma)

Elementi tarayıcı penceresine (viewport) çiviler. Kullanıcı sayfayı aşağı kaydırsa bile element ekranda sabit kalır.

• Sınıf: fixed
• Kullanım Alanları: Sabit Navbar, Modal (Popup) pencereler, Sağ alttaki WhatsApp ikonları.

Örnek: Sağ Alta Sabitlenmiş Mesaj Butonu

<button class="fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-full shadow-lg">
  Mesaj Gönder
</button>

5. Sticky (Yapışkan Konumlandırma)

Relative ve Fixed arasında melez bir yapıdır. Element normal akışta durur, ancak kullanıcı sayfayı kaydırdığında (scroll) belirli bir noktaya gelince ekrana yapışır.

• Sınıf: sticky
• Şart: Mutlaka bir top-0 (veya benzeri) değer verilmelidir. "Nereye yapışayım?" sorusunun cevabı olmalıdır.

Örnek: Kaydırınca Sabitlenen Tablo Başlığı

<div class="h-96 overflow-y-scroll">
  <h2 class="sticky top-0 bg-white border-b py-2">
    Bölüm Başlığı (Aşağı inince burada kalır)
  </h2>
  <p>Uzun içerik...</p>
  <p>Uzun içerik...</p>
</div>

Konumlandırma Yönleri (Placement)

absolute, fixed veya sticky kullanıldığında elementin yerini şu sınıflarla belirleriz:

• top-0: En üste yapıştır.
• bottom-0: En alta yapıştır.
• left-0 / right-0: Sola / Sağa yapıştır.
• inset-0: Dört taraftan da yapıştır (Elementi kapsayıcı kadar genişletir).
• top-1/2: Üstten %50 aşağı it.

Pro İpucu: Tam Ortalamak (Absolute Center) Bir absolute elementi kapsayıcının tam göbeğine koymak için şu kalıp kullanılır:

<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
  Tam Ortadayım
</div>