- Konu sahibi
- #1
CSS’te
Bir öğeye yalnızca
Örneğin
Aşağıdaki örneği bir HTML dosyasına yerleştirip tarayıcıda açabilirsiniz:
Beklenen sonuç: İkinci kutu normalde bulunacağı yerden 20 piksel sağda ve 10 piksel aşağıda görünür. Buna rağmen ikinci kutunun belge akışındaki alanı korunur; sonraki içerik, kutu hiç kaydırılmamış gibi yerleşir. Örnek beklediğiniz gibi görünmüyorsa sınıf adlarının HTML ve CSS içinde aynı yazıldığını, ayrıca tarayıcının CSS dosyasını gerçekten yüklediğini kontrol edin.
Karar verirken öğenin belge akışında kalıp kalmayacağını ve kaydırmanın neye göre yapılacağını esas alın:
Burada
Hayır. Öğe normal akışta kalır ve kapladığı alan korunur. Bu yönüyle
position: relative, bir öğeyi normal belge akışında tutarak kendi bulunduğu konuma göre görsel olarak kaydırmanızı sağlayan konumlandırma değeridir. Öğenin kapladığı alan korunur; bu nedenle çevresindeki diğer öğeler, öğe kaydırılmamış gibi yerleşmeye devam eder. En önemli kullanım alanlarından biri, içindeki position: absolute öğeler için referans kutusu oluşturmaktır.Nasıl çalışır?
Bir öğeye yalnızca
position: relative vermek, onu tek başına hareket ettirmez. Kaydırma için top, right, bottom veya left özelliklerinden en az biri de kullanılmalıdır.Örneğin
top: 10px, öğenin normal konumundan 10 piksel aşağı görünmesini sağlar. Bu kaydırma görsel olduğu için öğenin eski alanı belgede korunur. Aynı anda top ve bottom kullanmak yerine, okunabilirlik için genellikle tek yöndeki değeri tercih edin.Çalışan en küçük örnek
Aşağıdaki örneği bir HTML dosyasına yerleştirip tarayıcıda açabilirsiniz:
Kod:
<style>
.kart {
width: min(220px, calc(100% - 20px));
box-sizing: border-box;
padding: 16px;
background: #e8f0fe;
}
.kart--kaydirilmis {
position: relative;
left: 20px;
top: 10px;
background: #cfe2ff;
}
</style>
<div class="kart">Normal konum</div>
<div class="kart kart--kaydirilmis">Relative ile kaydırıldı</div>
<div class="kart">Sonraki kutu eski akış konumuna göre yerleşir.</div>Beklenen sonuç: İkinci kutu normalde bulunacağı yerden 20 piksel sağda ve 10 piksel aşağıda görünür. Buna rağmen ikinci kutunun belge akışındaki alanı korunur; sonraki içerik, kutu hiç kaydırılmamış gibi yerleşir. Örnek beklediğiniz gibi görünmüyorsa sınıf adlarının HTML ve CSS içinde aynı yazıldığını, ayrıca tarayıcının CSS dosyasını gerçekten yüklediğini kontrol edin.
Hangi durumda hangi özelliği kullanmalı?
Karar verirken öğenin belge akışında kalıp kalmayacağını ve kaydırmanın neye göre yapılacağını esas alın:
| İhtiyaç | Uygun yaklaşım | Sonuç |
|---|---|---|
| Öğeyi normal akışta tutup küçük bir görsel düzeltme yapmak | position: relative | Alan korunur, öğe kendi konumuna göre kayar |
| Bir çocuğu ebeveynin belirli bir köşesine yerleştirmek | Ebeveynde relative, çocukta absolute | Çocuk, en yakın uygun konumlandırılmış ebeveyni referans alır |
| Öğeyi akıştan çıkarıp pencereye göre sabitlemek | position: fixed | Öğe sabit konumda kalır ve normal akıştan çıkar |
relative çoğunlukla bir kart, buton veya kapsayıcıyı birkaç piksel düzeltmek için değil, kapsayıcıyı absolute alt öğeye referans yapmak için kullanılır. Örneğin kartın sağ üst köşesine rozet koyacaksanız kartı göreli, rozeti mutlak konumlandırabilirsiniz:
Kod:
.kart {
position: relative;
}
.rozet {
position: absolute;
top: 8px;
right: 8px;
}Burada
.rozet, sayfanın rastgele bir yerine değil, en yakın konumlandırılmış .kart öğesine göre yerleşir. Kartta position: relative bulunmazsa rozet, başka bir konumlandırılmış ata öğeyi veya uygun bir kök referansı kullanabilir ve beklenmedik yerde görünebilir.Yaygın hatalar
-
relativeverildiğinde öğenin otomatik olarak başka bir yere taşınacağını sanmak: Konum değişikliği içintop,leftgibi bir ofset gerekir. - Kaydırılan öğenin kapladığı alanın da taşındığını düşünmek: Normal akıştaki alan korunur; komşu öğeler görsel kaymaya göre yeniden dizilmez.
-
absoluteçocuğun referansını açıkça belirlememek: İlgili kapsayıcıyaposition: relativeekleyin ve çocuğuntop,right,bottomveyaleftdeğerlerini kapsayıcıya göre test edin. - Büyük kaydırmalarla düzen kurmaya çalışmak:
relativeofsetleri genel sayfa yerleşimi için değil, sınırlı görsel düzeltmeler ve konumlandırma referansı için kullanın. Büyük kaydırmalarda flex veya grid düzenini değerlendirin.
Kaynaklar
Sık sorulan sorular
position: relative öğeyi normal akıştan çıkarır mı?
Hayır. Öğe normal akışta kalır ve kapladığı alan korunur. Bu yönüyle
absolute ve fixed konumlandırmadan ayrılır.Relative ile absolute arasındaki temel fark nedir?
relative öğeyi kendi normal konumuna göre kaydırır ve alanını korur. absolute ise normal akıştan çıkar; konumu genellikle en yakın konumlandırılmış ata öğeye göre belirlenir.