Posisi dalam CSS - Position

Memposisikan elemen HTML

Mengatur tata letak dengan properti CSS position

Detail value dari properti CSS position adalah sebagai berikut :

1. position: relative
2. position: static
3. position: absolute
4. position: sticky
5. position: fixed

DEMO :

Posisi Relative

relative

Posisi relative : tidak mengubah tata letak

Posisi Static

static

Posisi static : tidak mengubah tata letak

Posisi Absolute

absolute

Posisi absolute : mengubah tata letak sehingga keluar dari bingkai dan posisi awalnya.
Untuk mempertahankan posisi absolute, elemen harus dibingkai dengan elemen yang berposisi relative

Posisi Sticky

sticky

Posisi sticky (lengket): tata letak elemen dengan posisi ini hanya akan berubah berdasarkan scroll halaman.
Scroll dikolom demo untuk melihat dampaknya.

Posisi Fixed

elemen fixed

Posisi fixed : tata letak posisi ini berdasarkan lebar layar atau yang biasa disebut sebagai viewport perangkat. Sehingga tata letaknya akan keluar dari bingkai asal (elemen induk) nya apabila lebarnya lebih kecil dari lebar layar perangkat atau viewport.

Demo Elemen fixed

⇐ Sebelumnya

Selanjutnya ⇒