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