Inset özelliği
inset ile konumlandırma öğrenirsin.
inset özelliği nedir?
inset, konumlandırılmış bir öğenin dört kenarından uzaklığını belirleyen mantıksal kısaltmadır. position: absolute ya da fixed olan bir öğede top, right, bottom, left yerine geçer.
inset: 0 yazmak dört kenarı da sıfırlar; öğe kapsayıcısını tam kaplar. inset: 1rem 2rem ise üst-alt 1rem, sol-sağ 2rem olarak yerleştirir.
inset-inline ve inset-block
inset-inline satır içi eksenin iki kenarını, inset-block ise block eksenin iki kenarını belirler. inset-inline-start satır başı, inset-inline-end satır sonu kenarıdır.
Sayfa direction: rtl olduğunda inset-inline-start otomatik olarak sağ kenara dönüşür. Fiziksel left ise değişmez; bu yüzden mantıksal bildirimler iki yöne de uyumlu çalışır.
inset nerede işe yarar?
inset özellikle sabit (fixed) ve yapışkan (sticky) ögelerde işe yarar. Üstte sabit duran bir bildirim çubuğu için position: sticky; inset-block-start: 0 yazman yeter.
Tam ekran kaplayan bir kaplama için position: fixed; inset: 0 en kısa yoldur. Mantıksal versiyonlar yön değiştirse bile doğru kenarı hedefler; bu yüzden modern tasarımda tercih edilir.
Uygulama Üstte yapışkan banner
.banner seçicisi için şu bildirimleri yaz: position: sticky, inset-block-start: 0 ve background: teal. Üçü de aynı blokta olsun.
Örnek çözümü göster
/* üstte yapışkan banner */
.banner {
position: sticky;
inset-block-start: 0;
background: teal;
}Kendini test et
-
inset: 0 ne yapar?
- Dört kenarı da sıfırlar
- Yalnızca üst kenarı sıfırlar
- Sol ve sağ kenarı sıfırlar
- Yalnızca alt kenarı sıfırlar
Cevabı göster
Dört kenarı da sıfırlar — Doğru. inset: 0 dört kenarı da sıfırlar.
-
Block başı uzaklığı
.banner { position: sticky; ____: 0; }Cevabı göster
.banner { position: sticky; inset-block-start: 0; }