CSS layouting - position static, relative, absolute Dan fixed

CSS layouting - position static, relative, absolute Dan fixed

CSS position sangat penting Karena akan membuat kalian dapat melakukan Tata letak dari element element html itu yang kalian buat itu sesuai dengan keinginan kalian

Position memungkinkan Kita menggeser sebuah element tanpa mempengaruhi element di sekitarnya Kan kalau Kita menggeser sebuah element menggunakan margin itu element yang di sekitar nya ikut menggeser nah dengan position ini tidak akan terjadi.

Value position

static
Jika Kita tidak memberikan properti position maka secara default position nya yaitu static

Dan jika kalian menggunakan yang non static akan membuat sebuah element menjadi seolah olah berbeda dimensi dari element lainnya
Buka website tingkerked untuk melihat ilustrasi nya

Element yang diberi position selain static dapat menggunakan properti top left bottom right untuk Mengatur posisinya

Relative
Ketika Kita menggerakan element dengan posisi relative (menggunakan top left bottom right) ruang yang ditempati oleh element tersebut masih Ada

Ketika Kita menggerakan element dengan posisi relative, element akan bergersk relative terhadap posisi semula nya

Jika Kita memberi properti top: 0 left: 0  maka element tidak akan berubah posisi nya.

Absolute
Ketika Kita menggerakan element dengan posisi absolute (menggunakan properti top left bottom right) ruang yang ditempati oleh element tersebut dianggap tidak Ada

Ketika Kita menggerakan element dengan posisi absolute ,element akan bergersk relative terhadap posisi dari Element parent nya ,selama element parent nya memiliki posisi yang juga non-statik

Jika Kita memberi Nilai top:0 lef:t:0 maka element akan berada diruang Kiri atas dari element parent nya.

Fixed
Position pixed ini sering Kita liat ketika Kita membuka Facebook itu icon pesan Dan beranda nya tetap Ada walaupun Kita scroll ,itulah gunanya fixed

Contoh penggunaan position

h1 {
position:absolute;
}

Z-index

Jika Kita menggunakan z index itu element akan maju satu element ke depan Kita 

Jika suatu element diberi sangat banyak z index misal z index 9000 maka element tersebut akan tetap berada paling depan antara element lainnya

Penggunaan z index

elem {
z-index:900;
}

Mungkin sampai disini pembahasan mengenali position untuk memastikan kalian paham saya kasih tugas buat kalian tugasnya adalah :buatlah pop up iklan di dalam sebuah website dengan transparan