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