Blog Request tutorial? klik disini!

  • Cara Menggunakan Z-Index Di CSS

    Ditulis oleh: Billiyam
    1246 kali dibaca
    17 Jul / 2014 08:30

    Halo teman - teman apa kabar semuanya baik baik saja ya ... kali ini saya akan membahas tentang Z-index.  sebelumnya ada yang pernah menggunakan layer pada photoshop ? jika pernah, z - index berkaitan dengan Layer, fungsinya adalah memposisikan apakah posisi object berada di bawah, tengah atau atas. maksudnya layer akan menimpa / membelakangi layer lain sesuai dengan posisi layernya. properti z - index ini biasanya di awali dengan position. value z - index biasanya 1, 2, 3, ... 99 yang artinya semakin besar valuenya maka posisi akan semakin keatas. dan sebaliknya jika posisi semakin kebawah maka valuenya (min) -1,  -2, -3

    perhatikan kode di bawah ini

    See the Pen z index by Dumet_School (@dumet_school) on CodePen.

    Pada keterangan di atas membuat layer2biru naik satu kali dan pada layar3yellow naik 2 kali karena posisi yang sebenarnya adalah layer1grey berada paling bawah kemudian layer2biru dan paling atas adalah layer3kuning, maka saat layer2biru di beri z-index: -1 maka yang terjadi adalah turun 1 layer sehingga layer1grey naik 1 layer begitu juga layer3yellow saat di beri z-index:-2 maka yang terjadi turun 2 layer melewati layer biru dan grey sehingga layer3yellow berada paling bawah.

    Semoga bermanfaat Artikel ini dan Terimakasih, sampai jumpa di artikel berikutnya.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155