Sabit Konumlandırma

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 58 / 76.

CSS'te sabit konumlandırma, ne kadar kaydırma yaparsanız yapın bir öğeyi ekranda aynı noktada tutar. position: fixed; ayarladığınızda öğe normal düzenden çıkarılır, bu nedenle diğer öğeler onu yok sayar. Öğe tarayıcı penceresine sabitlenmiş olarak kalır; bu da onu her zaman görünür olması gereken üstbilgiler, altbilgiler veya menüler için kullanışlı kılar.

Sabit konumlandırma kullanmak için temel sözdizimi şöyledir:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Bu bildirim, öğenin konumlandırma şemasını sabit olarak ayarlar.

top, right, bottom, left: Bu özellikler, öğenin görünüm alanına (viewport) göre konumunu belirtir. Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilen pozitif veya negatif değerler kullanabilirsiniz.

Örneğin:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Bu örnekte, header sınıfına sahip öğe; position: fixed;, top: 0; ve left: 0; ile görüntü alanının (viewport) üst kısmına sabitlenmiştir.

Görev

Kolay

Bir başlık (<div>) ve bir paragraf (<p>) içeren bir HTML belgesi size verilmiştir. Göreviniz, sayfa kaydırıldığında bile başlığın görünüm alanının (viewport) üstünde kalmasını sağlamak için sabit konumlandırma kullanmaktır. Aşağıdaki adımları izleyin:

header sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
.header öğesinin position özelliğini fixed olarak ayarlayın.
.header öğesinin top özelliğini 0 ve left özelliğini 0 olarak ayarlayın. Bu, başlığı görünüm alanının sol üst köşesine konumlandıracaktır.
Tüm görünüm alanı boyunca uzanmasını sağlamak için .header öğesinin width özelliğini 100% olarak ayarlayın.
Sayfa içeriğine karşı görünür olması için .header öğesinin background-color özelliğini #fcc726 (altın sarısı) olarak ayarlayın.
Daha iyi görünmesi için text-align özelliğini center olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>