Position fixed ve sticky

position: fixed ve sticky değerlerini öğrenirsin.

position: fixed ile pencereye sabitleme

position: fixed ögeyi belge akışından çıkarır ve tarayıcı penceresine (viewport) göre sabitler. Sayfa kaydırılsa bile öge aynı yerde kalır. top, right, bottom, left ile pencere kenarlarına göre yerleştirilir.

Bu değer en çok sabit üst bilgi ve geri-dön düğmeleri için kullanılır. Ziyaretçi aşağı kaydırdığında bu ögeler görünür kalır.

position: sticky ile eşikte yapışma

position: sticky melez bir değerdir. Önce normal belge akışında davranır; ama kaydırma belirli bir eşiği geçince fixed gibi davranmaya başlar ve verilen konuma yapışır.

Örneğin top: 0 ile position: sticky yazarsan, öge sayfada normal yeriyle başlar; kullanıcı aşağı kaydırınca üst kenara yapışır ve orada kalır. Bu, bölüm başlıkları ve kenar çubuğu için idealdir.

Hangisini ne zaman kullanmalısın?

Üst bilgi her zaman görünmeli ve kaydırılmamalıysa position: fixed seç. Öge belge akışından çıkar; altındaki içerik üst bilgini gizlememek için üst kenar boşluğu almalıdır.

Bölüm başlığı normal yerinde başlayıp yalnızca kaydırma sırasında yapışmalıysa position: sticky kullan. Öge akışta kalır; ek boşluk gerekmez.

Uygulama Üst bilgiyi sabitle

Bir header.site sınıf seçicisi yaz ve şu üç bildirimi tanımla: position: fixed, top: 0, left: 0. Böylece üst bilgi tarayıcı penceresinin sol üst köşesine sabitlenir.

Örnek çözümü göster

/* üst bilgiyi sabitle */
header.site {
  position: fixed;
  top: 0;
  left: 0;
}

Kendini test et

position: fixed hangi senaryo için uygundur?
- Paragraf metni iki sütuna bölünsün
- Üst bilgi kaydırmada yerinde kalsın
- Liste madde işaretleri değişsin
- Bağlantı rengi ziyaret edildi olarak işaretlensin
Cevabı göster

Üst bilgi kaydırmada yerinde kalsın — Doğru. fixed, kaydırma sırasında yerinde kalması gereken üst bilgi ve düğmeler için idealdir.

Kenar çubuğunu yapıştır

.sidebar {
  ____;
  top: 0;
}

Cevabı göster

.sidebar {
  position: sticky;
  top: 0;
}

Değeri anlamına eşle

fixed

Pencereye sabit
sticky

Eşik geçince yapışır
absolute

Kapsayıcıya göre

Sıradaki ders: Özet - Üst bilgi düzeni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler