CSS Academy · Ders

Sabit ve Yapışkan Konumlandırma

Öğeleri görünüm alanına sabitleyin veya kaydırma sırasında yapışan üstbilgiler ve kenar çubukları oluşturun.

3. ders / 413 adım

Sabit ve Yapışkan Konumlandırma, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

position: fixed

Sabit bir öğe tarayıcının görünüm alanına göre konumlandırılır ve sayfa kaydırılsa bile yerinde kalır. Bu öğe de belge akışından çıkarılır.

<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>

Sabit Konumlandırmanın Kullanım Alanları

position: fixed için yaygın kullanım alanları:

Üstte kalan gezinme çubukları
Yüzen eylem düğmeleri (FAB'ler)
Sağ altta bulunan sohbet bileşenleri
Çerez onay bantları
Modal kaplamalar

Sabit Başlıkları Telafi Etme

Sabit başlıklar altlarındaki içeriğin üzerine gelir. İçeriği aşağı itmek için başlığın yüksekliğine eşit bir üst iç boşluk veya kenar boşluğu ekleyin:

<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>

Dönüştürülmüş Üst Öğeler ve Fixed

Önemli bir istisna vardır: Bir üst öğeye CSS transform, perspective veya filter uygulanmışsa, sabit konumlandırma görünüm alanına değil, bu üst öğeye göre yapılır. Bu, yaygın bir hatadır.

position: sticky

position: sticky karma bir davranış sergiler: Öğe, tanımlanmış bir eşiğe (örneğin top: 0) ulaşana kadar normal şekilde kayar, ardından üst kapsayıcısı içinde yerinde sabitlenir.

<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>

Sticky için Kaydırılabilir Bir Üst Öğe Gerekir

Sticky öğe, kapsayıcı bloğunun içinde sabitlenir. Üst öğe kaydırılabilecek kadar uzun değilse sticky hiçbir etki göstermez. Üst öğede overflow hidden olarak ayarlanmamış olmalıdır.

Sticky için Top, Right, Bottom, Left

Sticky davranışını etkinleştirmek için en az bir ofset tanımlamanız gerekir. Yaygın yaklaşımlar şunlardır:

<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>

Yapışkan Tablo Başlıkları

Sticky, kaydırılabilir tablo sarmalayıcılarındaki tablo başlıkları için idealdir; kullanıcı satırlar arasında kaydırma yaparken başlık görünür kalır.

<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>

Yapışkan Kenar Çubuğu Deseni

Ana içerik kaydırılırken görünür kalmasını sağlayan klasik yapışkan kenar çubuğu:

<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>

Fixed ve Sticky Karşılaştırması

Temel farklar:

Fixed: her zaman görünüm alanına göre konumlandırılır ve her zaman akışın dışındadır
Sticky: eşiğe ulaşana kadar içerikle birlikte kayar, akışta kalır ve üst öğenin sınırında durur

Performans: Fixed ve Katmanlar

Sabit öğeler yeni bir yığın bağlamı oluşturur ve yeniden boyama alanlarıyla kesişiyorsa kaydırma sırasında yerleşim hesaplamasını tetikleyebilir. Sabit öğeleri basit tutun ve üzerlerinde box-shadow gibi maliyetli özelliklerden kaçının.

Hızlı Kontrol

position: sticky için geçerli olup position: fixed için geçerli olmayan kısıt nedir?

İnteraktif derste cevapla

Özet

position: fixed, yapışkan gezinme ve kaplamalar için öğeleri görünüm alanına sabitler. position: sticky normal şekilde kayar, bir eşiğe ulaştığında sabitlenir ve tablo başlıkları ile kenar çubukları için idealdir. Her ikisinin de sabitlenmeyi etkinleştirmek için en az bir ofset özelliğine ihtiyacı vardır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Sabit ve Yapışkan Konumlandırma” dersi ücretsiz mi?

Evet — “Sabit ve Yapışkan Konumlandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Sabit ve Yapışkan Konumlandırma” dersinde ne öğreneceğim?

Öğeleri görünüm alanına sabitleyin veya kaydırma sırasında yapışan üstbilgiler ve kenar çubukları oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Sabit ve Yapışkan Konumlandırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön