- Konu sahibi
- #1
İlk olarak öğeye
Burada
Sabit öğenin başka içeriklerin arkasında kalmaması için yeterli bir
Öğenin ekranın tamamını kaplamasını istemiyorsanız
Bu kullanımda öğe, ekranın üstünden
Her iki özellik de kaydırma sırasında üstte görünen öğeler oluşturabilir; ancak öğenin neye göre konumlandığı ve ne zaman sabit kaldığı farklıdır.
Bu öğe sayfanın başından itibaren ekrana yapışık durmaz. Önce normal belge akışında yer alır; kaydırma sırasında üst sınıra geldiğinde sabitlenir. Kapsayıcının yüksekliği,
Örneği kaydedip sayfayı yeniledikten sonra aşağı kaydırın.
Kısacası, öğenin sayfa boyunca ekranın üstünde kalması için
position: fixed verin; ardından ekranın üst kenarına top: 0 ve yatay konumuna göre left: 0, right: 0 ya da genişlik tanımlayın. Böylece öğe, sayfa kaydırılsa bile tarayıcı penceresinin üstünde kalır. Eğer öğenin yalnızca belirli bir kapsayıcı içinde kaydırılırken üstte kalmasını istiyorsanız position: sticky kullanmanız gerekir.Ekranın üstünde sürekli duran öğe
fixed konumlandırma, öğeyi normal belge akışından çıkarır ve tarayıcı penceresine göre sabitler. Aşağıdaki örnekte üst menü, sayfa aşağı kaydırılsa da ekranın üst kenarında görünür:
HTML:
<style>
body {
margin: 0;
padding-top: 60px;
}
.ust-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: #222;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
z-index: 1000;
}
</style>
<header class="ust-menu">
Üst menü
</header>
<main>
<p>Sayfa içeriği burada yer alır.</p>
<p>Yeterli içerik olduğunda sayfa kaydırılabilir.</p>
</main>Burada
top: 0 öğenin üst kenarını ekranın üst kenarına, left: 0 ve right: 0 ise öğeyi ekranın tamamına yayar. Menü yüksekliği 60px olduğu için body öğesine padding-top: 60px verilir. Bu boşluk bırakılmazsa sayfanın ilk içeriği sabit menünün altında kalabilir.Sabit öğenin başka içeriklerin arkasında kalmaması için yeterli bir
z-index değeri kullanın. Ancak z-index yalnızca öğelerin aynı yığılma bağlamında karşılaştırıldığı durumlarda etkili olur; beklediğiniz sonucu alamazsanız öğenin üst kapsayıcılarında transform, opacity veya benzeri yığılma bağlamı oluşturan özellikleri kontrol edin.Sabit öğenin genişliğini ve yatay konumunu ayarlama
Öğenin ekranın tamamını kaplamasını istemiyorsanız
left, right ve width özelliklerini birlikte düzenleyebilirsiniz. Örneğin sağ üstte duran bir bildirim kutusu için:
CSS:
.bildirim {
position: fixed;
top: 20px;
right: 20px;
width: 280px;
z-index: 1000;
}Bu kullanımda öğe, ekranın üstünden
20px ve sağından 20px içeride görünür. Küçük ekranlarda kutunun taşmaması için genişliği sınırlamak isterseniz width: min(280px, calc(100vw - 40px)); gibi bir değer kullanabilirsiniz. Böylece yatay kenar boşlukları korunur.fixed ile sticky arasındaki fark
Her iki özellik de kaydırma sırasında üstte görünen öğeler oluşturabilir; ancak öğenin neye göre konumlandığı ve ne zaman sabit kaldığı farklıdır.
| Özellik | Konum ölçütü | Kaydırma davranışı | Uygun kullanım |
|---|---|---|---|
fixed | Tarayıcı penceresi | Öğe, sayfa boyunca ekranın belirlenen noktasında kalır | Sürekli görünen üst menü, yardım düğmesi veya bildirim |
sticky | Yakın kaydırılabilir kapsayıcı | Öğe normal akışta ilerler, belirlenen sınıra ulaşınca geçici olarak sabitlenir | Bölüm başlığı, tablo başlığı veya kapsayıcı içi menü |
sticky kullanmak için öğeye genellikle top: 0 da vermelisiniz:
CSS:
.bolum-basligi {
position: sticky;
top: 0;
background-color: #fff;
z-index: 10;
}Bu öğe sayfanın başından itibaren ekrana yapışık durmaz. Önce normal belge akışında yer alır; kaydırma sırasında üst sınıra geldiğinde sabitlenir. Kapsayıcının yüksekliği,
overflow ayarları veya kapsayıcının içeriği sticky davranışını etkileyebilir. Bu nedenle kapsayıcılardan birinde overflow: hidden ya da overflow: auto varsa öğenin hangi alan içinde kaydırıldığını kontrol edin.Çalışıp çalışmadığını kontrol etme
Örneği kaydedip sayfayı yeniledikten sonra aşağı kaydırın.
fixed kullanılan öğe ekranın üstündeki aynı konumda kalıyor ve içerik onun altından geçiyorsa temel uygulama doğrudur. İlk içerik menünün altında görünüyorsa sabit öğenin yüksekliği kadar üst boşluk ekleyin. Öğenin görünmemesi veya başka bir öğenin arkasında kalması durumunda sırasıyla z-index değerini, öğenin gerçekten seçilip seçilmediğini ve üst kapsayıcılardaki yığılma bağlamı oluşturan CSS özelliklerini kontrol edin.Kısacası, öğenin sayfa boyunca ekranın üstünde kalması için
position: fixed; top: 0;, öğenin normal akıştan sonra üstte tutulması için position: sticky; top: 0; kullanılır. fixed ile çalışırken içerik üstünün kapanmaması için sabit öğenin yüksekliği kadar boşluk bırakmayı unutmayın.