Position absolute

CSS kursu · Başlangıç · Ders 69/82

position: absolute ile öğeleri konumlandırırsın.

position: absolute ile serbest konum

position: absolute ögeyi normal belge akışından çıkarır. Çevresindeki ögeler onun yerini doldurur; sanki orada değilmiş gibi davranırlar. Öge daha sonra en yakın konumlandırılmış atasına göre yerleştirilir.

Bu değer, bir rozeti bir kartın köşesine koymak ya da bir simgeyi metnin yanına sabitlemek için idealdir. Yerleştirme top, right, bottom, left ile yapılır.

Kapsayıcı blok

Bir position: absolute ögesi, en yakın position değeri static olmayan ataya göre konumlanır. Bu ataya kapsayıcı blok (containing block) denir. Böyle bir ata yoksa öge tarayıcı penceresine göre yerleşir.

Pratik tavsiye: kapsayıcıya position: relative ver, çocuğa position: absolute ver. Bu kombinasyon en sık kullanılan desendir.

Köşelere yüzde ve sıfır değeri

Bir position: absolute ögesinde top: 0 ve right: 0 yazarsan öge kapsayıcısının sağ üst köşesine yapışır. top: 50% ve left: 50% ise ögeyi kapsayıcının sol-üst köşesinden ölçerek ortalar.

Yüzde değerleri kapsayıcı bloğun boyutlarına göre hesaplanır. Bu, rozet, simge ve araç ipucu konumlandırmada çok işe yarar.

Uygulama Rozeti sağ üste konumlandır

Bir .card .badge alt seçici yaz ve şu üç bildirimi tanımla: position: absolute, top: 0, right: 0. Böylece rozet kartın sağ üst köşesine yapışır. (Kartın position: relative olduğunu varsay.)

Örnek çözümü göster

/* rozeti sağ üste konumlandır */
.card .badge {
  position: absolute;
  top: 0;
  right: 0;
}

Kendini test et

Bu düzende rozetin kapsayıcı bloğu hangisi?
```
.card {
  position: relative;
}
.card .badge {
  position: absolute;
  top: 0;
  right: 0;
}
```
- .card sınıfı
- Tarayıcı penceresi
- html kök etiketi
- badge'in kendisi
Cevabı göster

.card sınıfı — Doğru. .card, badge'in en yakın konumlandırılmış atasıdır; kapsayıcı blok odur.

Araç ipucunu serbest konumla

.tooltip {
  ____;
  top: 100%;
  left: 0;
}

Cevabı göster

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
}

Değeri anlamına eşle

absolute

Akıştan çıkar
relative

Kapsayıcı yapar
static

Varsayılan akış

Position absolute