Position static ve relative
position: static ve relative değerlerini öğrenirsin.
position özelliği ve static
position özelliği bir ögenin nasıl konumlanacağını belirler. Varsayılan değer static'tir: öge normal belge akışında dizilir; top, right, bottom, left bildirimleri işe yaramaz.
Bu yüzden çoğu öge için position yazmana gerek yoktur. Yalnızca ögeyi ötelerken, kaydırırken ya da sabitlerken static dışındaki değerler kullanılır.
position: relative ile kaydırma
position: relative bildirimi ögeyi normal akışından kısmen kaydırır. Önce nereye düşeceği hesaplanır, sonra top, right, bottom, left değerleri kadar ötelenir. Çevresindeki ögeler bu kaydırmadan etkilenmez; orijinal yer hâlâ ona ayrılır.
Örneğin top: 10px yazarsan öge aşağıya 10 piksel kayar ama altındaki öge yer değiştirmez.
top, right, bottom, left
Bu dört özellik position değeri static dışında bir şey olduğunda anlam kazanır. top: 20px ögeyi üst kenardan 20 piksel aşağı çeker; left: 10px sol kenardan 10 piksel sağa iter. Negatif değer de verebilirsin.
position: relative için bu değerler ögenin orijinal yerinden ölçülür. Öge kayar ama çevresi bu kaymadan etkilenmez.
Uygulama Rozeti yukarı ve sağa kaydır
Bir .ribbon sınıf seçicisi yaz ve şu üç bildirimi tanımla: position: relative, top: -8px, left: 12px. Böylece kurdele rozeti orijinal yerinden biraz yukarı ve sağa kayar.
Örnek çözümü göster
/* rozeti kaydır */
.ribbon {
position: relative;
top: -8px;
left: 12px;
}Kendini test et
-
Hangisi position özelliğinin varsayılan değeridir?
- relative
- absolute
- fixed
- static
Cevabı göster
static — Doğru. static, position özelliğinin varsayılan değeridir.
-
Rozeti kaydırmaya hazırla
.badge { ____; top: 4px; }Cevabı göster
.badge { position: relative; top: 4px; } -
Değeri anlamına eşle
- static
- Belge akışında kalır
- relative
- Yerini korur, kayar
- top: 10px
- Aşağı 10 piksel