CSS Layouting : position2;

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 dari elemen parent-nya, selama element 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
  

fixed

  • ketika kita menggerakan elemen fixed(menggunakan properti top, left, bottom dan right), maka fixed akan selalu bergerak relatif terhadap windows browser
  • ketika kita scroll halaman, element tersebut akan tetap di posisinya

Komentar

Posting Komentar

Postingan populer dari blog ini

CSS Layouting : Reset

Gambar
          Ada banyak element HTML yang memiliki default margin dan padding. contohnya pada body yang memiliki margin pada default nya     cara mengatasinya dengan mengatur body dengan margin dan padding 0     namun bukan body saja yang memiliki margin atau padding default. jika kita tulis satu-satu bisa dibilang cukup ribet. kita juga bisa mereset dengan menggunakan selector universal yaitu *, dengan selector universal maka akan mereset sebua selector yang ada di HTML     namun cara tersebut akan mereset semua element yang ada di html, jadi cara tersebut ada yang bilang cukup "berat" untuk dingunakan. ada cara lain untuk mereset semua element html, yaitu dengan css reset yang telah dibuat oleh eric meyer bisa dilihat dari website https://meyerweb.com/eric/tools/css/reset/  atau cari di google css reset     kita cukup mengcopy yang ada di dalam kotak kedalam css maka akan otomatis mereset selector html yang sering...
Baca selengkapnya

CSS Layouting : position

Gambar
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: ...
Baca selengkapnya