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ı

Sıradaki ders: Position-try

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler