CSS position nedir?

CSS position, bir HTML öğesinin normal belge akışında nasıl konumlanacağını ve top, right, bottom, left değerleriyle nereden itibaren taşınacağını belirleyen özelliktir. Varsayılan değer static olduğu için çoğu öğe position tanımlanmadan normal akışta yer alır. Taşan bir öğenin çevresindeki alanı korumasını istiyorsanız relative, akıştan bağımsız bir konum istiyorsanız absolute, ekrana sabitlenmesini istiyorsanız fixed, kaydırma sırasında belirli bir noktada tutunmasını istiyorsanız sticky kullanılır.

position değerleri nasıl çalışır?​

static​

static, varsayılan davranıştır. Öğe normal akıştadır ve top, left gibi konumlandırma değerleri uygulanmaz. Normal metin, paragraf ve blok düzeninde özel bir konumlandırma gerekmiyorsa bu değer yeterlidir.

relative​

relative öğeyi normal akışta tutar; ancak ofset verildiğinde görsel olarak taşır. Öğenin eski yeri için ayrılan alan korunur. Ayrıca çoğu kullanımda, içindeki absolute bir öğe için referans kutusu oluşturmak amacıyla kapsayıcıya position: relative verilir.

absolute​

absolute öğeyi normal akıştan çıkarır. Konumu, kendisine uygun bir konumlandırılmış üst öğeye göre hesaplanır. Böyle bir üst öğe yoksa referans genellikle sayfanın başlangıç alanıdır. Bu nedenle kart içindeki rozet, resim üzerindeki simge veya açılır menü gibi öğelerde kapsayıcıya position: relative vermek önemlidir.

fixed​

fixed öğeyi normal akıştan çıkarır ve genellikle tarayıcı görünüm alanına göre sabitler. Sayfa kaydırılsa bile aynı ekranda kalan yardım düğmesi veya sabit gezinme çubuğu için kullanılabilir. Sabit öğe diğer içeriğin üzerine gelebileceğinden boyut, z-index ve küçük ekran davranışı birlikte kontrol edilmelidir.

sticky​

sticky, normal akışta yer kaplar; kaydırma sırasında belirlenen eşiğe ulaştığında geçici olarak sabitlenmiş gibi davranır. Çalışması için genellikle top: 0 gibi en az bir eşik gerekir. Üst kapsayıcıların yükseklik, taşma ve kaydırma davranışı sticky öğenin beklenen noktaya ulaşmasını etkileyebilir.

Transform uygulanmış bir ata, fixed öğe için de kapsayıcı blok oluşturabilir. Dolayısıyla fixed her koşulda pencereye bağlıdır denemez; hesaplanan konumu atalarla birlikte inceleyin.

Somut örnek: kart içinde rozet konumlandırma​

Kart içindeki rozetin kartın sağ üst köşesinde kalmasını istiyorsanız kartı referans kapsayıcı, rozeti de bağımsız konumlanan öğe yapın:


Bu örnekte card sınıfı relative olduğu için rozet, sayfaya değil kartın iç kenarlarına göre konumlanır. absolute öğe akıştan çıktığından başlık ve paragraf rozet için otomatik alan ayırmaz; rozet içerikle çakışıyorsa kartın üst iç boşluğunu artırın. Beklenen sonuç, “Yeni” etiketinin kartın sağ üstünde görünmesidir. Etiket sayfanın başka bir yerine gidiyorsa amaçlanan referans kapsayıcıda position: relative bulunduğunu ve arada daha yakın bir referans oluşturan ata olup olmadığını kontrol edin.

Doğru değeri seçme​

Aşağıdaki kısa karar tablosu, ihtiyaca göre başlangıç değerini seçmenize yardımcı olur.


Önce position değerini, sonra gerçekten gerekli olan ofseti ekleyin. Sadece üst öğeyi referans yapmak için relative kullanıyorsanız top veya left eklemeniz gerekmez. Bir öğe diğerinin arkasında kalıyorsa z-index değerlerini ve öğelerin konumlandırılmış olup olmadığını inceleyin; büyük bir z-index değeri her kapsayıcı sınırını aşamaz.

Sık yapılan hatalar​

1. absolute öğenin üst kapsayıcısına position: relative vermemek: Öğenin beklenmedik bir referansa göre yerleşmesine neden olur.
2. relative ile taşınan öğenin eski alanının yok olduğunu sanmak: relative alanı korur; komşu öğeler eski konumuna göre dizilmeye devam eder.
3. fixed öğeyi mobil görünümde test etmemek: Sabit düğme veya çubuk içerik ve ekran klavyesiyle çakışabilir.
4. sticky için eşik vermemek: top, bottom veya uygun bir yan ofset yoksa tutunma davranışı oluşmayabilir.
5. Yerleşim sorununu yalnızca z-index artırarak çözmeye çalışmak: Sorun çoğu zaman yanlış kapsayıcı, taşma ayarı veya farklı bir stacking context kaynaklıdır.

Kaynaklar​

• MDN: position

Sık sorulan sorular​

position ile margin arasındaki fark nedir?​

margin normal akıştaki boşluğu düzenler. position ise öğenin akışa katılımını ve konumlandırma referansını değiştirir. Komşu öğelerin düzenli biçimde aralanması için önce margin veya padding tercih edin.

Bir öğeyi ortalamak için mutlaka position kullanmalı mıyım?​

Hayır. Tek satırlı veya blok düzenlerde flex ve grid çoğu zaman daha anlaşılır çözümdür. position, öğenin belirli bir referansa göre üst üste bindirilmesi ya da özel bir noktaya yerleştirilmesi gerektiğinde tercih edilmelidir.