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

Sıradaki ders: Position absolute

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler