Anchor() fonksiyonu
anchor() fonksiyonu ile konumlandırma öğrenirsin.
anchor() işlevi
anchor() işlevi, çapanın kenarlarına göre konum değeri döndürür. top: anchor(bottom); yazarsan öğenin üst kenarı, çapanın alt kenarına hizalanır. Bu, bir araç ipucunu düğmenin altına yerleştirmenin en doğal yoludur.
İşlevin parantez içindeki anahtar sözcükler çapanın kenarlarını verir: top, bottom, left, right, start, end, center. Öğe hangi kenara hizalanacaksa onu yazarsın.
anchor() anahtar sözcükleri
anchor() işlevinin en sık kullanılan anahtar sözcükleri şunlardır: top, bottom, left, right çapanın kenarlarını; center çapanın ortasını verir. start ve end yazma yönüne göre sol ya da sağdır.
İki eksen birlikte kullanılır. Örneğin top: anchor(bottom); left: anchor(center); yazarsan öğe çapanın altında, yatayda ortalanmış olur. Bu, açılır menülerin klasik yerleşimidir.
Uygulama Tooltipi çapanın altına koy
Bir .tooltip seçicisi yaz. Blokta position-anchor: --info-button ve top: anchor(bottom) bildirileri olsun. Böylece tooltip düğmenin altına yerleşir.
Örnek çözümü göster
/* tooltipi çapanın altına koy */
.tooltip {
position-anchor: --info-button;
top: anchor(bottom);
}Kendini test et
-
<code>top: anchor(bottom)</code> ne yapar?
.tooltip { position: absolute; position-anchor: --info; top: anchor(bottom); }- Tooltipi çapanın üst kenarına yapıştırır
- Tooltipi çapanın ortasına yapıştırır
- Tooltipi çapa ile aynı yere koyar
- Tooltipin üst kenarını çapanın alt kenarına hizalar
Cevabı göster
Tooltipin üst kenarını çapanın alt kenarına hizalar — Doğru. top: anchor(bottom), öğenin üst kenarını çapanın alt kenarına hizalar; tooltip alta gelir.
-
Tooltipi çapanın altına yerleştir
.tooltip { position-anchor: --info; top: anchor(____); }Cevabı göster
.tooltip { position-anchor: --info; top: anchor(bottom); } -
anchor() anahtarını konumuna eşle
- anchor(bottom)
- Çapanın alt kenarı
- anchor(top)
- Çapanın üst kenarı
- anchor(center)
- Çapanın ortası
- anchor(right)
- Çapanın sağ kenarı