Anchor positioning nedir?
CSS anchor positioning temellerini öğrenirsin.
Anchor positioning nedir?
CSS anchor positioning, bir öğeyi başka bir öğeye göre konumlandırmanın bildirimsel yoludur. İlk öğe çapa (anchor) olur, ikinci öğe de çapaya bağlanır ve onu izler. Açılır menüler, araç ipuçları ve bilgi balonları için tasarlanmıştır.
Eskiden bir düğmenin altındaki menüyü yerleştirmek için JavaScript ile ofset hesaplamak gerekirdi. Anchor positioning bu matematiği CSS'e taşır; kaydırma ve boyut değişiminde menü otomatik olarak yerinde kalır.
Çapa ve konumlanan öğe
Anchor positioning iki rolü bir araya getirir. Çapa (anchor), referans noktasıdır; genelde bir düğme, bağlantı ya da bilgi simgesidir. Konumlanan öğe ise çapaya bağlanan araç ipucu, açılır menü ya da balondur.
Çapa sayfada normal akışta durur. Konumlanan öğe ise position: absolute ya da position: fixed olmak zorundadır; çapa konumlandırma yalnızca konumlanmış öğelerde çalışır.
Neden önemli?
Anchor positioning'in üç avantajı vardır. Birincisi, JavaScript ile ofset hesaplamaktan kurtulursun; konum tamamen CSS'te tanımlanır. İkincisi, çapa kaydırma ya da pencere boyutu değişince konumlanan öğe otomatik olarak yerinde kalır.
Üçüncüsü, çakışma çözümü de yerleşiktir; öğe pencere dışına taşarsa tarayıcı başka bir konum dener. Bütün bunlar sonraki derslerde adım adım gelir.
Uygulama Popover temelini kur
Bir .popover seçicisi yaz. Blokta position: absolute ve background: white bildirileri olsun. Bu, çapa konumlandırmanın gerektirdiği konumlanmış öğe temelidir.
Örnek çözümü göster
/* popover temeli */
.popover {
position: absolute;
background: white;
}Kendini test et
-
Anchor positioning ne yapmanı sağlar?
- Renk geçişlerini yumuşatır
- CSS dosya boyutunu küçültür
- Bir öğeyi çapaya bağlayıp onu izlemesini sağlar
- Sayfa kaydırmayı engeller
Cevabı göster
Bir öğeyi çapaya bağlayıp onu izlemesini sağlar — Doğru. Çapaya bağlanan öğe, çapa hareket ettikçe otomatik olarak onu izler.
-
Konumlanan öğenin position değeri
.popover { position: ____; background: white; }Cevabı göster
.popover { position: absolute; background: white; }