Dasar Z-Index

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

Dalam CSS, property z-index mengatur urutan tumpukan elemen yang diposisikan (elemen dengan posisi selain static). Saat elemen saling tumpang tindih, z-index menentukan elemen mana yang muncul di depan dan mana yang berada di belakang. Elemen dengan nilai z-index yang lebih tinggi berada di depan elemen dengan nilai yang lebih rendah.

Berikut sintaks dasar untuk menggunakan property z-index:

selector {
    position: relative; /* atau absolute, fixed, atau sticky */
    z-index: value;
}

position: relative; (atau absolute, fixed, atau sticky): Elemen harus diposisikan agar z-index berpengaruh.

value: Nilai bilangan bulat yang menunjukkan urutan penumpukan. Elemen dengan nilai lebih tinggi ditumpuk di depan elemen dengan nilai lebih rendah. Nilainya bisa positif, negatif, atau nol.

Sebagai contoh:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Dalam contoh ini, .box1 dan .box2 sama-sama diposisikan secara absolut. Karena .box1 memiliki nilai z-index yang lebih tinggi, .box1 akan ditumpuk di depan .box2 saat keduanya bertumpang tindih.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan tiga elemen <div> yang saling bertumpuk, dengan class box1, box2, dan box3. Tugasmu adalah menggunakan property z-index untuk mengatur urutan tumpukan elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class box1. Atur property position menjadi absolute, top menjadi 0, left menjadi 0, dan z-index menjadi 3.
Tulis aturan CSS yang menargetkan elemen <div> dengan class box2. Atur property position menjadi absolute, top menjadi 20px, left menjadi 20px, dan z-index menjadi 2.
Tulis aturan CSS yang menargetkan elemen <div> dengan class box3. Atur property position menjadi absolute, top menjadi 40px, left menjadi 40px, dan z-index menjadi 1.

Amati bagaimana nilai z-index memengaruhi urutan tumpukan kotak, dengan box1 berada di atas dan box3 di bawah.

Coba sendiri

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>