Latihan 1: Z-Index — CSS

Latihan 1 dari materi Z-Index di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kotak kuning sekarang ketutup kotak biru (z-index: 4) dan kotak hijau (z-index: 2). Naikkan kotak kuning ke paling atas:

Di aturan .kotak-kuning { ... } yang sudah ada, tambahkan z-index dengan angka lebih besar dari 4, misalnya z-index: 5;.
Biarkan position: absolute di .kotak-kuning. Tanpa position itu, z-index gak berlaku.
Biarkan <div class="kotak-kuning"> tetap ada.

Hasilnya, kotak kuning menutupi kotak biru dan hijau.

Hint

Kotak dengan nomor lapisan paling besar tampil paling atas. Kuning belum punya nomor lapisan, biru punya 4.
Nomor lapisan itu properti z-index. Kuning sudah punya position: absolute, jadi tinggal kasih z-index yang lebih besar dari 4. Angka 4 belum cukup, karena kalau sama, yang ditulis belakangan menang.
.kotak-kuning { position: absolute; background: yellow; top: 15px; left: 100px; padding: 40px 20px 40px 120px; z-index: 5; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…