- Konu sahibi
- #1
CSS’te
Element, kendisine en yakın ve
Normal akışta bir kutu, kendisinden önceki ve sonraki elementleri etkiler.
Aşağıdaki dosyayı
Beklenen sonuç,
Aşağıdaki ayrım, yanlış konumlandırmayı önlemek için yeterlidir:
Ayrıca
Tarayıcı geliştirici araçlarında gerçek DOM hiyerarşisini ve hesaplanan stilleri kontrol edin. Araya giren konumlandırılmış bir öğe, transform veya containment yeni kapsayıcı oluşturmuş olabilir. CSS’teki ebeveyn varsayımı ile öğenin gerçek üst zinciri aynı olmayabilir.
Evet. Kapsayıcıda
position: absolute, bir elementi normal belge akışından çıkarıp belirli bir kapsayıcıya göre konumlandırır. Element için sayfada yer ayrılmaz; diğer elementler onu yokmuş gibi yerleşir. Konum genellikle top, right, bottom, left veya inset ile belirlenir.Element, kendisine en yakın ve
position değeri static olmayan üst elemana göre konumlanır. Bu, yaygın konumlandırma kuralıdır; transform, filter veya bazı containment ayarları da kapsayıcı oluşturabilir. Uygun bir kapsayıcı yoksa başlangıç kapsayıcısı kullanılır. Bu nedenle absolute kullanılan elementin doğru kutuya göre hareket etmesi isteniyorsa ebeveyn elemana çoğunlukla position: relative verilir.Nasıl çalışır?
Normal akışta bir kutu, kendisinden önceki ve sonraki elementleri etkiler.
absolute uygulandığında kutu bu akıştan ayrılır. Örneğin bir kartın sağ üst köşesine rozet yerleştirmek, görselin üzerine ikon koymak veya bir menüyü belirli bir kutunun içine sabitlemek için kullanılabilir.top: 0; right: 0; ifadesi, elementin kapsayıcısının üst ve sağ kenarına sıfır uzaklıkta olmasını ister. bottom ve left de aynı mantıkla çalışır. Boyutu yalnız içeriğe bağlamayın: karşılıklı inset değerleri ve auto boyutlar kullanılınca kutu kalan alanı doldurabilir.Çalışan en küçük örnek
Aşağıdaki dosyayı
index.html adıyla kaydedip tarayıcıda açabilirsiniz:
Kod:
<!doctype html>
<html lang="tr">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Absolute konumlandırma örneği</title>
<div class="kart">
<h2>Ürün başlığı</h2>
<span class="rozet">Yeni</span>
</div>
<style>
.kart {
position: relative;
box-sizing: border-box;
width: min(100%, 280px);
padding: 48px 16px 16px;
border-radius: 4px;
border: 1px solid #999;
}
.rozet {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 6px;
background: #222;
color: #fff;
border-radius: 4px;
}
.kart h2 { margin: 0; overflow-wrap: anywhere; }
</style>
</html>Beklenen sonuç,
Yeni rozetinin kartın sağ üst köşesinde görünmesidir. .kart içinde position: relative bulunmasaydı rozet karta değil, uygun bir konumlandırma bağlamı bulunana kadar üst kapsayıcıya göre yerleşebilirdi.Hangi durumda hangi değeri seçmeli?
Aşağıdaki ayrım, yanlış konumlandırmayı önlemek için yeterlidir:
| Değer | Belge akışı | Tipik kullanım |
|---|---|---|
static | Akışta kalır | Varsayılan yerleşim |
relative | Akışta kalır | Kendi yerinden küçük kaydırmalar ve kapsayıcı oluşturma |
absolute | Akıştan çıkar | Kart içi rozet, ikon veya katman |
fixed | Akıştan çıkar | Genellikle görünüm alanına bağlı sabit öğe |
sticky | Akışla ilişkisini korur | Kaydırma sırasında belirli eşiğe tutunan öğe |
Uygularken izlenecek adımlar
- Konumlandırılacak elemente
position: absoluteverin. - Elementin hangi kutuya göre hareket etmesini istiyorsanız en yakın ebeveyne
position: relativeekleyin. - Konumu açıkça belirlemek için
top,right,bottom,leftveyainsetkullanın. - Elementin normal akıştan çıkması nedeniyle alttaki içeriklerin üst üste binip binmediğini kontrol edin.
- Dar ekranlarda metin taşması, rozetin içerikle çakışması ve yakınlaştırmada içeriğin kapanması ihtimallerini test edin.
absolute kullanıldığı halde ebeveyne position: relative verilmemesidir. Bu durumda element beklenmeyen bir üst kapsayıcıya göre konumlanır. İkinci hata, ana sayfa düzenini tamamen absolute değerleriyle kurmaktır. Bu yaklaşım içerik uzunluğu, ekran genişliği ve responsive düzen değiştiğinde kırılabilir. Ana yerleşimde Flexbox veya Grid kullanıp absolute değerini yalnızca bağımsız katmanlar için kullanmak daha sağlamdır.Ayrıca
z-index yalnızca katman sırasını etkiler; yanlış kapsayıcıya göre konumlanma sorununu çözmez. Önce konumlandırma bağlamını düzeltin, ardından gerekiyorsa katman sırasını ayarlayın.Sık sorulan sorular
Üst elemana relative verdiğim hâlde öğe neden başka yere göre yerleşiyor?
Tarayıcı geliştirici araçlarında gerçek DOM hiyerarşisini ve hesaplanan stilleri kontrol edin. Araya giren konumlandırılmış bir öğe, transform veya containment yeni kapsayıcı oluşturmuş olabilir. CSS’teki ebeveyn varsayımı ile öğenin gerçek üst zinciri aynı olmayabilir.
absolute ile elementi yatay ve dikey ortalayabilir miyim?
Evet. Kapsayıcıda
position: relative, elementte position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); kullanılabilir. Elementin boyutu değişirse transform merkezlemeyi korur.