Position: sticky özelliğinin hangi özelliklerini biliyorsunuz?

position: sticky – bu, position: relative ve position: fixed karışımıdır.

• Varsayılan davranış: Öğenin, position: relative gibi davranır ve belge akışında kalır.
• Kaydırma sırasında: Öğenin, kaydırma konteynerine veya görünüm alanına (viewport) göre belirli bir kaydırma noktasına (örneğin, top: 0) ulaştığında, "yapışır" ve position: fixed gibi davranır, bu konumda görünür kalır.
• Kaydırma mesafesi: top, right, bottom, left özellikleriyle belirlenir. sticky'nin düzgün çalışması için en az birinin kullanılması gerekir.
• Kaydırma konteyneri (scroll container/containing block): Öğenin, genellikle en yakın kaydırma veya belirli bir formatlama bağlamına sahip üst öğe sınırları içinde "yapışması" söz konusudur. Sadece body/html kaydırılırsa, görünüm alanına göre yapışma gerçekleşir.
• Çakışma: Yapışkan öğe, altında kalan içeriği aşabilir, tıpkı position: fixed gibi.
• Z-indeks: Çakışma davranışını z-index belirler.
• Kısıtlamalar:
  • Üst öğe overflow: hidden, overflow: auto veya overflow: scroll ise çalışmaz, içerik kesilir.
  • Öğenin, kaydırma konteynerinin kenarına ulaşmasıyla "yapışma" sona erebilir.
• Kullanım: Sıkça, tabloların başlıkları, gezinme panelleri veya yan öğeler gibi, kaydırıldığında görünür kalması gereken yapışkan başlıklar veya menüler oluşturmak için kullanılır.

/* Kullanım örneği */
.sticky-header {
  position: sticky;
  top: 0; /* Kaydırma alanının veya konteynerin üstüne yapışır */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Başlığın diğer içeriklerin üzerinde olmasını sağlar */
}