SS POSITION

SS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu sudah memiliki nilai position:static. Berikut kita bahas lebih jauh dari keempat css position tersebut :

Static

position: static;Static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti positionMenggunakan position selain static (non-static),akan membuat sebuah elemen menjadi seolah olah berbeda dimensi dari elemen lainnya.Elemen yang diberi position selain static dapat menggunakan properti top, left, bottom dan right untuk mengatur posisinya .

Relative

position: relative;Ketika kita menggerakan elemen dengan posisi relative (menggunakan properti top, left. bottom dan right), ruang yang ditempati elemen tersebut masih adaKetika kita menggerakan elemen dengan posisi relative, elemen akan bergerak relatif terhadap posisi semula-nyaJika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya.

Absolute

position: absolute;Ketika kita menggerakan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada.Ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dan elemen parent-nya, selama elemen parent-nya memiliki posisi yang juga non-static.Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen-nya

Jika Absolute tidak memiliki parent relative maka posisinya akan seperti berikut ini :

Tetapi jika Absolute memiliki parent relative maka absolute akan menempel pada parent relative seperti dibawah ini :

Fixed

position: fixed;Ketika kita menggerakan elemen dengan posisi fixed (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak adaKetika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap window (browser), meskipun elemen parent-nya bernilai non-staticJika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nyaElemen akan 'terkunci' dan tidak bergerak dari posisinya meskipun halaman di-scroll