Warning: curl_init() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 95

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 97

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 98

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 100

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 103

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 106

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 333

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 334

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 363

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 370

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 375

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 376

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 377

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 379

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 382

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 150

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 151

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 159

Warning: curl_exec() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 162

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 181

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 182
Fungsi z-index pada CSS | Gusdwi.info

Fungsi z-index pada CSS

Properti z-index berfungsi untuk mengatur susunan layer pada browser.
Sebetulnya sebuah tag HTML seperti tag div misalnya adalah sebuah layer yang disusun secara berurutan, tapi dengan Properti z-index anda bisa mengatur susunannya sesuai keinginan anda.
Properti z-index dapat bernilai bilangan integer mulai dari nol ke atas, semakin besar nilai bilangannya maka susunannya menjadi semakin diatas.

Properti z-index akan berfungsi bila disertai dengan properti “position” seperti position:relative atau position:absolute.

Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:

<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>

Selanjutnya masing-masing class selector diberi style sepertti berikut:

div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}

div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}

hasilnya akan tampak seperti dibawah ini:

BERWARNA BIRU
BERWARNA HIJAU
BERWARNA KUNING

Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.

5 thoughts on “Fungsi z-index pada CSS

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *