CSS Layouting #5 : Position
•
33 likes•30,461 views
Position adalah properti CSS yang dapat membuat kita melakukan tata letak dari elemen HTML sesuai dengan keinginan kita. ada 4 value yang bisa kita gunakan pada properti position : 1. static 2. relative 3. absolute 4. fixed
Report
Share
CSS Layouting #5 : Position
- 1. CSS position
- 3. CSS Position • static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti position • Menggunakan 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
- 6. ke-tiga div berada dalam ‘satu dimensi’
- 8. relative • Ketika kita menggerakkan elemen dengan posisi relative (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut masih ada • Ketika kita menggerakkan elemen dengan posisi relative, elemen akan bergerak relatif terhadap posisi semula-nya • Jika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya
- 10. div ke-dua berada pada ‘dimensi yang berbeda’
- 13. 50px 50px
- 14. menyisakan ruang
- 15. 50px 50px
- 17. absolute • Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada
- 18. absolute • Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada • Ketika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dari elemen parent-nya
- 19. absolute • Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada • Ketika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dari elemen parent-nya, selama elemen parent-nya memiliki posisi yang juga non-static
- 20. absolute • Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada • Ketika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dari 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 parent-nya
- 21. absolute • Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada • Ketika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dari 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 parent-nya
- 23. div ke-tiga berada di bawah div ke-dua, karena ruang yang sebelumnya ditempati oleh div ke-dua dianggap tidak ada
- 24. 50px 150px
- 25. 50px 150px posisi awal (top: 0, left:0) posisi akhir (top: 50px, left:150px)
- 27. jika .dua diberi properti: position: absolute; top: 0; left: 0; .dua akan berada dimana? ? ? atau
- 28. kenapa disini? padahal sudah disimpan di dalam pembungkus
- 29. masih ingat? .dua dan .pembungkus berada di ‘dimensi’ yang berbeda!
- 30. kita harus mengubah posisi .pembungkus agar ‘dimensi’-nya sama!
- 32. .dua dan .pembungkus berada di ‘dimensi’ yang sama!
- 33. position: fixed;
- 34. fixed • Ketika kita menggerakkan elemen dengan posisi fixed (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada • Ketika kita menggerakkan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap window (browser), meskipun elemen parent-nya bernilai non-static • Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nya • elemen akan terkunci dan tidak bergerak dari posisinya meskipun halaman di-scroll