Position-try
position-try ile çakışma çözümünü öğrenirsin.
Çakışma sorunu
Bir popover çapanın altına yerleştiğinde, çapa sayfanın altına yakınsa popover pencerenin dışına taşabilir. Buna çakışma (collision) denir. Eskiden JavaScript ile pencere kenarını ölçmek gerekirdi.
position-try bu ölçümü CSS'e taşır. Tarayıcı, varsayılan konum pencereye sığmazsa, sıradaki yedek konumu dener. Hepsi bildirimsel, hepsi otomatik.
@position-try bildirisi
Yedek konum @position-try bildirisiyle tanımlanır. Bir ad alır ve bir blok içerir: @position-try --flip-above { top: anchor(top); bottom: auto; }. Blok, varsayılan konumun tersini söyler.
Burada top: anchor(top) öğeyi çapanın üst kenarına taşır; bottom: auto da alt kenarı boşaltır. Böylece yedek etkinleşince popover yukarı açılır.
Yedekleri uygulama
Tanımlanan yedekleri uygulamak için position-try özelliğine yedek adlarını yazarsın: position-try: --flip-above --flip-right;. Tarayıcı önce varsayılan konumu dener; pencereye sığmazsa sıradaki yedeğe geçer.
Yerleşik anahtar sözcükler de vardır. position-try: flip-block yazarsan tarayıcı otomatik olarak üst/alt yön değiştirir; elle @position-try yazmadan hızlı bir çözümdür.
Uygulama Yedek konum tanımla
Bir @position-try --flip-above bildirisi yaz. Blokta top: anchor(top) ve bottom: auto bildirileri olsun. Bu yedek, popover'ı çapanın üstüne taşır.
Örnek çözümü göster
/* yedek konum: çapanın üstü */
@position-try --flip-above {
top: anchor(top);
bottom: auto;
}Kendini test et
-
position-try ne işe yarar?
- Çapanın adını değiştirir
- Konumlanan öğenin arka planını boyar
- Çakışma durumunda yedek konumlar dener
- Çapa ile öğe arasına boşluk koyar
Cevabı göster
Çakışma durumunda yedek konumlar dener — Doğru. position-try, varsayılan konum pencereye sığmazsa yedek konumları sırayla dener.
-
@position-try bildirisinin adını yaz
@position-try ____ { top: anchor(top); bottom: auto; }Cevabı göster
@position-try --flip-above { top: anchor(top); bottom: auto; } -
Özellikleri rolüne eşle
- @position-try
- Yedek konum tanımlar
- position-try
- Yedekleri uygular
- anchor()
- Çapaya göre konum verir
- position-anchor
- Çapaya bağlar