Setting tumpukan elemen div dengan style CSS z-index

Tutorial singkat pada website design kali ini tentang penggunaan properti z-index oleh admin pengelola situs (website master). Dengan setting position: absolute kita dapat membuat elemen yang bertumpuk-tumpuk. Tentu saja kita akan mengatur tumpukan-tumpukan tersebut mana yang di depan dan di belakang. Pada CSS kita mengatur tumpukan ini dengan menggunakan z-index.

Definisi dan penggunaan z-index (arsip website design)

Properti z-index menentukan susunan tumpukan sebuah elemen. Bentuk sintaks dasar prperti z-index adalah seperti berikut ini: 

z-index: auto|number|initial|inherit;

Perhatikan variasi nilai untuk properti tersebut, terdiri : auto, angka, initial dan inherit.

Atau perhatikan tabel nilai properti z-index di bawah ini.

Pedoman penggunaan untuk content website

1. An element with greater stack order is always in front of an element with a lower stack order.
2. Note : z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Ilustrasi penggunaan style CSS menggunakan properti z-index

Gambar ilustrasi diatas dapat dituangkan dalam coding seperti snippet berikut :

Perhatikan gambar:

• Dalam penggunaannya selalu di kombinasikan dengan penggunaan properti "position: absolute" (nama prperti position dan nilai properti )
• Makin besar nilai z-index maka akan ditampilkan makin depan dan untuk coding gambar tersebut dapat dilihat pada code diatas.

---

That's all we know - Happy blog blogger

SITEMAP

PETA WEBSITE DESIGN

THANK YOU for your continued liking 'n sharing. If you haven't liked this post yet, you may do that by hitting the buttons just BELOW. Please drop your comment and questions ……

Anda sedang membaca Setting tumpukan elemen div dengan style CSS z-index

Posted in: CSS-series