position: relative + absolute
position: absolute memposisikan elemen relatif terhadap leluhur terdekat yang punya position selain static. Jadi polanya selalu berpasangan: parent diberi position: relative, anak diberi position: absolute. Lupa memberi relative pada parent membuat elemen melompat ke sudut halaman — bug paling umum di materi ini. Perhatikan juga bahwa top, right, bottom, dan left baru berpengaruh setelah position elemennya bukan static.
👀 Contoh dulu
.kartu {
position: relative; /* ← acuan bagi anak */
height: 80px;
}
.label {
position: absolute; /* ← menempel ke .kartu */
bottom: 4px;
left: 4px;
}Hasilnya: Label menempel di sudut kiri-bawah kartu. Kalau .kartu tidak diberi relative, label akan melompat ke sudut kiri-bawah HALAMAN.
💡 Selalu berpasangan: parent relative, anak absolute. Ini pola yang akan kamu pakai terus untuk badge, tooltip, dan ikon.
📝 Sekarang giliranmu
Beri .wadah position: relative, dan beri .badge position: absolute dengan top: 0 dan right: 0.