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;
}

Sıradaki ders: Anchor() fonksiyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler