Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

07 September 2014

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.

variasi value untuk properti z-index

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

urutan tumpukan elemen efek css style properti z-index
Gambar ilustrasi diatas dapat dituangkan dalam coding seperti snippet berikut :

properti z-index coding tumpukan elemen

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



Comments

0 komentar:

Posting Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading