Position-anchor
position-anchor ile çapaya bağlamayı öğrenirsin.
position-anchor ile bağlama
Çapaya bağlanmak için position-anchor özelliğini kullanırsın. Değer, çapa adıdır: position-anchor: --menu-button;. Bu bildiri, konumlanan öğeyi çapaya bağlar.
Bağlama için iki koşul vardır. Öğe position: absolute ya da position: fixed olmalıdır. Çapa adı da gerçek bir anchor-name ile eşleşmelidir; aksi halde bağlantı kurulmaz.
Bağlamanın iki koşulu
Bağlamanın çalışması için iki koşul gereklidir. Önce position: absolute (ya da fixed) bildirisi olmalıdır; normal akıştaki bir öğe çapa konumlandırma kullanamaz. Sonra position-anchor değerinin, sayfada tanımlı bir anchor-name ile birebir eşleşmesi gerekir.
İsim uyumsuzsa bağlantı sessizce kurulamaz; tarayıcı hata vermez, öğe yalnızca çapaya bağlı değildir. Bu yüzden adları dikkatle yazmak önemlidir.
Çapa hareket edince
Çapa bağlandıktan sonra, konumlanan öğe çapayı izler. Çapa kaydırma, pencere boyutu değişimi ya da üst öğenin yeniden düzenlenmesi ile yer değiştirirse, bağlı öğe otomatik olarak yeni konumunu alır.
Bu davranış, JavaScript ile ofset hesaplamak ve kaydırma olaylarını dinlemek zorunda kalmadığın anlamına gelir. Tarayıcı, çapa ile bağlı öğeyi birlikte taşır.
Uygulama Popoverı çapaya bağla
Bir .popover seçicisi yaz. Blokta position: absolute ve position-anchor: --menu-button bildirileri olsun. Böylece popover düğme çapasına bağlanır.
Örnek çözümü göster
/* popoverı çapaya bağla */
.popover {
position: absolute;
position-anchor: --menu-button;
}Kendini test et
-
position-anchor ne yapar?
- Öğeye çapa adı verir
- Konumlanan öğeyi çapaya bağlar
- Çapanın konumunu değiştirir
- Çakışma durumunda yedek dener
Cevabı göster
Konumlanan öğeyi çapaya bağlar — Doğru. position-anchor, konumlanan öğeyi bir çapa adına bağlar.
-
position-anchor değerini yaz
.popover { position: absolute; position-anchor: ____; }Cevabı göster
.popover { position: absolute; position-anchor: --menu-button; }