CSS Layouting : position

Position

Position

• static

• relative

• absolute

• fixed

Static

• static adalah nilai default dari tiap tiap element ketika tidak diberi property position
• menggunakan position selain static(non static), akan membuat sebuah element menjadi seolah-olah berbeda dimensi dari element lainnya
• element yang diberi position selain static dapat menggunakan property top, left, bottom dan right untuk mengatur posisinya

contoh :

    jika dibuat 3d maka hasilnya:

    jika kotak 2 digeser kebawah 20px dan kekanan 20px menggunakan margin maka hasilnya:

relative

• ketika kita menggerakan element dengan posisi relative (menggunakan properti top, left, bottom dan right), ruang yang ditempati element tersebut masih ada
• ketika kita menggerakan element dengan posisi relative, elemen akan bergerak relative terhadap posisi semula-nya
• jika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya 

contoh : 

    jika kotak dua diberi position relative hasilnya:

    jika dibuat 3d hasilnya:

jika kota dua yang sekarang mempunyai posisi relative digeser kebawah 20px dan kekanan 20px menggunakan properti top dan left hasilnya :