Cara bermain Tumpukan Kardus
- Baca instruksi level. Properti yang perlu kamu pakai disebut di sana.
- Tulis aturan CSS lengkap dengan selectornya, mis.
.buku { ... }atau.peti-a { ... }. Kardus bergeser setiap kali kamu mengetik. - Garis ukur di gudang menunjukkan dari mana
top,right,bottom, danleftdiukur. Garis putus-putus tipis menandai tempat asal kardusrelative. - Di level z-index, panel tumpukan membandingkan urutanmu dengan target dari atas ke bawah, lengkap dengan lapisan peti tempat tiap kardus terkunci.
- Tekan Cek jawaban atau Ctrl + Enter. Pesan cek menyebut kardus pertama yang meleset atau pasangan yang tertukar.
- Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.
Yang kamu pelajari
- Level 1
position: relative
Menggeser kardus dari tempat asalnya. Tempat asal itu tetap disimpan, jadi tetangganya tidak bergeser.
- Level 2
top, right, bottom, left
Jarak dari sisi patokan.
bottom: 20pxmendorong ke atas,right: 20pxmendorong ke kiri. - Level 3
position: absolute
Mengeluarkan kardus dari barisan dan menaruhnya diukur dari patokan.
- Level 5
Containing block
Patokan kardus
absolute: leluhur terdekat yangposition-nya bukanstatic. - Level 6
z-index
Urutan tumpuk elemen positioned. Tanpa z-index, yang belakangan di HTML ada di atas.
- Level 8
z-index negatif
Menaruh elemen di bawah kardus yang masih ikut barisan, tapi tetap di atas lantai stacking context-nya.
- Level 9
Stacking context
Lapisan yang dibuat elemen positioned ber-
z-indexangka. Anak-anaknya tidak bisa keluar dari lapisan itu.
z-index hanya bersaing di lapisan yang sama
z-index: 99 tidak berarti paling atas di halaman. Angka itu hanya dibandingkan dengan saudara di stacking context yang sama. Kalau petinya position: relative; z-index: 1 dan peti tetangganya z-index: 2, seluruh isi peti pertama ada di bawah peti kedua.
Untuk memperbaikinya, naikkan z-index petinya, atau hapus z-index peti itu supaya tidak membuat lapisan sendiri. z-index: auto tidak membuat stacking context, jadi anak-anaknya ikut bersaing di lapisan luar.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Kenapa top dan left saya tidak berpengaruh?
Semua elemen bawaannya position: static, dan offset diabaikan untuk elemen static. Tambahkan position: relative atau absolute dulu. Hal yang sama berlaku untuk z-index.
Bagaimana dengan position: fixed dan sticky?
Game ini belum memakainya. fixed diukur dari layar dan sticky butuh area yang digulir, jadi keduanya tidak cocok untuk gudang kecil yang diskalakan. Deklarasi fixed dan sticky diabaikan di sini.
Selector dan nilai apa saja yang dibaca?
Hanya selector satu kelas seperti .buku atau .peti-a, properti position, top, right, bottom, left, dan z-index. Offset harus dalam px atau 0, dan z-index bilangan bulat atau auto.
Kenapa jawaban yang berbeda bisa sama-sama benar?
Yang dicek posisi tiap kardus di gudang dan urutan tumpuk kardus yang saling menutupi, bukan teks CSS-mu. Menurunkan z-index Peti B sama benarnya dengan menaikkan z-index Peti A kalau hasilnya sama.