Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

CSS Layouting #5 : Position

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

CSS Layouting #5 : Position

  1. 1. CSS position
  2. 2. position static relative absolute fixed
  3. 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
  4. 4. www.tinkercad.com
  5. 5. ke-tiga div berada dalam ‘satu dimensi’
  6. 6. position: relative;
  7. 7. 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
  8. 8. tidak ada perubahan ?
  9. 9. div ke-dua berada pada ‘dimensi yang berbeda’
  10. 10. 50px 50px
  11. 11. menyisakan ruang
  12. 12. 50px 50px
  13. 13. position: absolute;
  14. 14. absolute • Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada
  15. 15. 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
  16. 16. 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
  17. 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 • 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
  18. 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, 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
  19. 19. div ke-tiga
 hilang ?
  20. 20. div ke-tiga berada di bawah div ke-dua, karena ruang yang sebelumnya ditempati oleh div ke-dua dianggap tidak ada
  21. 21. 50px 150px
  22. 22. 50px 150px posisi awal (top: 0, left:0) posisi akhir (top: 50px, left:150px)
  23. 23. jika .dua diberi properti: position: absolute; top: 0; left: 0; .dua akan berada dimana? ? ? atau
  24. 24. kenapa disini? padahal sudah disimpan di dalam pembungkus
  25. 25. masih ingat? .dua dan .pembungkus berada di ‘dimensi’ yang berbeda!
  26. 26. kita harus mengubah posisi .pembungkus agar ‘dimensi’-nya sama!
  27. 27. .dua dan .pembungkus berada di ‘dimensi’ yang sama!
  28. 28. position: fixed;
  29. 29. 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
  30. 30. thankyou. sandhikagalih@unpas.ac.id

×