Materi
Properti position menentukan apakah sebuah elemen tetap mengikuti aliran normal halaman atau dikeluarkan darinya. Setelah itu properti top, right, bottom, dan left menggeser posisinya. Nilai bawaan position adalah static: elemen mengikuti aliran normal dan keempat properti penggeser itu diabaikan.
- relative: elemen tetap memakai ruangnya di aliran normal, tetapi digambar bergeser dari tempat itu.
- absolute: elemen dikeluarkan dari aliran normal dan diposisikan terhadap leluhur terdekat yang position-nya bukan static.
- fixed: elemen dikeluarkan dari aliran dan diposisikan terhadap area tampil, sehingga tidak ikut bergulir.
- sticky: elemen mengikuti aliran normal sampai batas yang ditulis di top tercapai, lalu berhenti di sana selama induknya masih terlihat.
.kartu {
position: relative; /* jadi titik acuan */
}
.label {
position: absolute;
top: 8px;
right: 8px;
}Pasangan yang paling sering dipakai adalah relative pada wadah dan absolute pada isinya. Wadah diberi position: relative tanpa nilai penggeser apa pun — perannya hanya menjadi titik acuan — lalu label di dalamnya diberi position: absolute dengan top dan right, sehingga label itu menempel di sudut wadah ke mana pun wadahnya berpindah.
Elemen yang sudah diposisikan dapat saling menumpuk, dan z-index menentukan urutannya: angka yang lebih besar digambar di atas. Properti z-index hanya berlaku pada elemen yang position-nya bukan static, dan angkanya dibandingkan hanya di dalam konteks penumpukan yang sama, jadi z-index: 999 di dalam satu kartu tidak pernah menembus kartu di sebelahnya.
