Meydan okuma - Anchor panel

Anchor positioning ile akıllı açılır panel kurarsın.

Anchor positioning ile panel

Anchor positioning, bir açılır paneli tetikleyen düğmeye göre konumlamayı sağlar. Düğmeye anchor-name: --btn verirsin; panele position-anchor: --btn yazarsın. Panel artık düğmeye bağlanır.

Panelin konumunu top: anchor(bottom) gibi bildirimlerle ayarlarsın; bu, düğmenin alt kenarına hizalar. Çakışma olursa position-try bildirimi yedek konumlara geçer; böylece panel ekran dışına taşmaz.

Uygulama Anchor açılır paneli kur

Bir açılır panel kur. .menu-button etiketinde anchor-name: --btn bildirimi olsun. .dropdown etiketinde position-anchor: --btn, position: absolute, top: anchor(bottom) ve position-try: --flip bildirimleri olsun.

Örnek çözümü göster

/* menü düğmesi */
.menu-button {
  anchor-name: --btn;
}

/* açılır panel */
.dropdown {
  position-anchor: --btn;
  position: absolute;
  top: anchor(bottom);
  position-try: --flip;
}

Kendini test et

Anchor bildirimlerini eşleştir

anchor-name

Düğmeyi adlandırır
position-anchor

Paneli bağlar
anchor()

Konum hesaplar
position-try

Yedek konuma geçer
Bir panelin üst kenarını düğmenin alt kenarına hizalamak için hangi bildirim yazılır?
```
.dropdown {
  position-anchor: --btn;
  /* ??? */
}
```
- top: anchor(top)
- top: anchor(left)
- bottom: anchor(bottom)
- top: anchor(bottom)
Cevabı göster

top: anchor(bottom) — Doğru. top: anchor(bottom), panelin üst kenarını düğmenin alt kenarına bağlar.

anchor-name değerini yaz

.menu-button {
  anchor-name: ____;
}

.dropdown {
  position-anchor: --btn;
}

Cevabı göster

.menu-button {
  anchor-name: --btn;
}

.dropdown {
  position-anchor: --btn;
}

Sıradaki ders: Meydan okuma - Uzman projesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler