Belajar CSS : Mengenal z-index Pada CSS untuk Mengatur Tumpukan Objek Pada Blog

Z-index pada CSS - Selamat datang di blog yang sering berbagi materi daging secara gratis😂. pada artikel ini kita kembali belajar tentang CSS dimana yang kita bahas kali ini adalah masalah tumpuk menumpuk objek.

Mungkin bagi kalian yang sering mengunjungi salah satu blog kadang menemukan sebuah objek yang tumpang tindih sehingga tidak enak di lihat. Biasanya hal tersebut terjadi karena salah penggunaan z-index.

Maka dari itu di pertemuan ini saya akan membahas lebih dalam lagi tentang tumpuk menumpuk objek pada blog.

Pengertian z-index

adalah sebuah CSS yang berfungsi untuk mengatur sebuah tumpukan objek baik itu diatur ke bagian atas maupun bagian bawah objek.

Untuk lebih jelas nya fungsi ini hampir mirip seperti layer pada photoshop yang bisa anda atur agar sebuah objek berada di atas maupun dibawah.

Biasanya z-index ini dapat di atur menggunakan nominal angka. semakin tinggi angkanya maka layer(objek) nya semakin di atas, begitu juga sebaliknya.

Contoh penggunaan z-index

Agar kita semua lebih paham maka akan saya berikan contoh.

#box1 {
z-index : 1
}

#box2 {
z-index : 2
}

Dengan CSS di atas maka box2 akan berada di tumpukan atas box1 karena nilai z-index nya lebih besar dari box1.

Saya beri contoh lagi

#box1 {
z-index : 5
}

#box2 {
z-index : 1
}

nah dengan CSS di atas bisa kita artikan bahwa box1 berada di atas box2 karena nilai box1 lebih besar dari box2.

Note : intinya semakin besar nilai angka pada z-index maka akan semakin naik ke atas tumpukan lain, begitu juga sebaliknya.

Oke itu saja sedikit pembelajaran CSS kali ini, semoga anda dapat mengikuti terus penbalajaran mengenai CSS, HTML dan Javascript di blog ini.

www.idscorpion.my id