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

Sıradaki ders: Block ve inline

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler