CSS Layouting #5 : Position
33 likes31,462 views
Dokumen ini membahas tentang berbagai nilai properti posisi dalam CSS, termasuk static, relative, absolute, dan fixed. Setiap jenis posisi memiliki cara kerja yang berbeda dalam hal bagaimana elemen terletak dalam dimensi halaman. Misalnya, elemen dengan posisi absolute tidak mempertahankan ruang pada elemen lain, sedangkan relative mempertahankan ruang aslinya.
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