Penempatan Absolut

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

Dalam CSS, pemosisian absolut memungkinkan kamu menempatkan elemen tepat di lokasi yang kamu inginkan di dalam containernya.

Ketika kamu menetapkan position: absolute;, elemen tersebut dikeluarkan dari tata letak normal, sehingga elemen lain bertindak seolah-olah elemen itu tidak ada. Elemen tersebut memosisikan dirinya berdasarkan leluhur terdekat yang memiliki posisi yang ditetapkan (bukan static). Jika tidak ada, elemen tersebut memosisikan dirinya relatif terhadap halaman.

Berikut sintaks dasar untuk menggunakan pemosisian absolut:

.parent {
    position: relative; /* Jadikan parent sebagai leluhur yang memiliki posisi */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: Selector CSS yang menargetkan elemen induk. Mengatur position: relative; memungkinkan elemen anak diposisikan secara absolut.

.child: Selector CSS yang menargetkan elemen yang ingin kamu posisikan secara absolut.

position: absolute;: Deklarasi ini mengatur skema pemosisian elemen menjadi absolut, sehingga elemen dikeluarkan dari alur normal.

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

Contohnya:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

Dalam contoh ini, elemen .parent ditetapkan sebagai leluhur yang diposisikan dengan position: relative;. Elemen .child diposisikan secara absolut dengan position: absolute;, dan posisinya ditetapkan 50 piksel dari atas dan 100 piksel dari kiri leluhur terdekat yang diposisikan (elemen .parent).

Tantangan

Mudah

Kamu diberi dokumen HTML dengan elemen induk (<div>) yang berisi dua elemen anak (<div>) dengan class box1 dan box2. Tugasmu adalah menggunakan pemosisian absolut untuk memosisikan elemen box2 di dalam parent. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class parent. Atur property position-nya menjadi relative agar elemen tersebut menjadi leluhur yang diposisikan.
Tulis aturan CSS yang menargetkan elemen <div> dengan class box2.
Atur property position elemen .box2 menjadi absolute.
Atur property top elemen .box2 menjadi 30px dan property right menjadi 20px. Ini akan memosisikan kotak sejauh 30 piksel dari atas dan 20 piksel dari kanan leluhur yang diposisikan (parent).

Coba sendiri

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>