Dasar Penempatan

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

Dalam CSS, positioning adalah sekumpulan property yang memungkinkan kamu mengatur posisi elemen pada halaman web. Secara default, posisi elemen mengikuti alur normal dokumen HTML. Namun, dengan positioning CSS, kamu dapat mengeluarkan elemen dari alur normal dan menempatkannya di lokasi tertentu relatif terhadap elemen yang memuatnya atau viewport (area yang terlihat pada jendela browser).

Ada beberapa nilai untuk property position, masing-masing memiliki perilakunya sendiri:

static: Ini adalah nilai default. Elemen diposisikan sesuai alur normal dokumen. Property top, right, bottom, dan left tidak berpengaruh.

relative: Elemen diposisikan relatif terhadap posisi normalnya. Mengatur property top, right, bottom, dan left akan menggeser elemen menjauhi posisi normalnya, tetapi elemen tetap menempati ruang dalam alur normal.

absolute: Elemen dihapus dari alur normal dan diposisikan relatif terhadap ancestor terdekat yang memiliki posisi (ancestor dengan position selain static). Jika tidak ditemukan ancestor yang memiliki posisi, elemen diposisikan relatif terhadap blok penampung awal (biasanya viewport).

fixed: Elemen dihapus dari alur normal dan diposisikan relatif terhadap viewport. Elemen tetap di tempatnya meskipun halaman digulir.

Berikut sintaks dasar untuk menggunakan property position:

selector {
    position: value;
}

value: Perilaku pemosisian yang diinginkan (misalnya, static, relative, absolute, fixed, sticky).

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah div induk (<div>) yang berisi satu div anak (<div>). Tugasmu adalah menggunakan property position untuk mengubah konteks penempatan elemen. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class container. Atur property position-nya menjadi relative. Ini akan menjadikannya leluhur yang memiliki posisi untuk elemen anaknya.
Tulis aturan CSS yang menargetkan elemen <div> dengan class box. Atur property position-nya menjadi absolute. Ini akan mengeluarkannya dari alur normal dan memungkinkan kamu menempatkannya relatif terhadap leluhur terdekatnya yang memiliki posisi (container).
Atur property top pada elemen .box menjadi 50px dan property left menjadi 100px. Ini akan menempatkan box 50 piksel dari bagian atas dan 100 piksel dari sisi kiri leluhurnya yang memiliki posisi (container).

Coba sendiri

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>