Kedudukan Statik dan Relatif

Sifat position mengawal cara elemen ditempatkan dalam aliran dokumen. Lima nilainya ialah: static, relative, absolute, fixed dan sticky.

Setiap elemen secara lalai menggunakan position: static. Elemen statik mengikut aliran dokumen biasa — elemen blok bertindan secara menegak, manakala elemen sebaris mengalir dari kiri ke kanan. Sifat anjakan (atas, kanan, bawah, kiri) tidak memberi kesan.

position: relative mengekalkan elemen dalam aliran biasa tetapi membolehkan anda menganjaknya secara relatif kepada kedudukan biasanya sendiri menggunakan top, right, bottom dan left.

Apabila anda menggunakan position: relative dengan anjakan, elemen bergerak secara visual tetapi ruang susun atur asalnya masih diperuntukkan. Elemen lain tidak mengisi ruang kosong itu.

Sifat anjakan menggerakkan elemen dari titik rujukannya:

• top: menggerakkannya ke bawah dari tepi atas
• left: menggerakkannya ke kanan dari tepi kiri
• Nilai negatif membalikkan arah

z-index hanya berfungsi pada elemen berposisi (bukan statik). Jika anda perlu mengawal susunan lapisan, tetapkan sekurang-kurangnya position: relative.

Kegunaan paling penting position: relative ialah menjadikan elemen sebagai blok pembendungan untuk anak yang diletakkan secara mutlak — walaupun tanpa sebarang nilai anjakan.

Menggabungkan position: relative dengan transform akan mencipta konteks susunan baharu. Elemen kekal dalam aliran tetapi boleh diubah secara visual.

Elakkan menetapkan position: relative pada setiap elemen. Tindakan ini mencipta konteks susunan yang boleh menyukarkan pengurusan z-index. Gunakannya hanya apabila anda memerlukan anjakan atau perlu menjadikan anak yang diletakkan secara mutlak berlabuh.

Oleh sebab penempatan relatif tidak menjejaskan aliran susun atur, anda boleh menganimasikan top/left dengan selamat untuk kesan visual — walaupun menganimasikan transform: translate() lebih berprestasi.

Dalam DevTools, lihat panel Computed untuk melihat nilai position yang berkuat kuasa. Rajah model kotak menunjukkan koordinat anjakan tepat yang digunakan.

position: static ialah lalai — tiada anjakan dan tiada susunan lapisan. position: relative membenarkan anjakan dari kedudukan elemen itu sendiri serta mengekalkan ruang susun aturnya. Peranan terpentingnya ialah bertindak sebagai blok pembendungan untuk anak yang diletakkan secara mutlak.