Penempatan Tetap

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 58 dari 76.

Dalam CSS, posisi fixed menjaga elemen tetap di tempat yang sama pada layar, tidak peduli seberapa jauh kamu menggulir. Saat kamu mengatur position: fixed;, elemen tersebut dikeluarkan dari tata letak normal, sehingga elemen lain mengabaikannya. Elemen itu tetap menempel pada jendela browser, sehingga berguna untuk header, footer, atau menu yang harus selalu terlihat.

Berikut sintaks dasar untuk menggunakan posisi tetap:

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

position: fixed;: Deklarasi ini mengatur skema posisi elemen menjadi tetap.

top, right, bottom, left: Property ini menentukan posisi elemen relatif terhadap viewport. Kamu dapat menggunakan nilai positif atau negatif, yang ditentukan dalam piksel (px), em (em), persentase (%), atau satuan CSS valid lainnya.

Sebagai contoh:

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

Dalam contoh ini, elemen dengan class header diposisikan tetap di bagian atas viewport dengan position: fixed;, top: 0;, dan left: 0;.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan header (<div>) dan paragraf (<p>). Tugasmu adalah menggunakan pemosisian tetap agar header tetap berada di bagian atas viewport meskipun halaman digulir. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class header.
Atur property position pada elemen .header menjadi fixed.
Atur property top pada elemen .header menjadi 0 dan property left menjadi 0. Ini akan menempatkan header di sudut kiri atas viewport.
Atur property width pada elemen .header menjadi 100% agar membentang selebar seluruh viewport.
Atur property background-color pada elemen .header menjadi #fcc726 (kuning keemasan) agar terlihat jelas di atas konten halaman.
Atur property text-align menjadi center agar tampilannya lebih baik.

Coba sendiri

<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>