Cara Menggunakan Z-Index Di CSS

17/07/2014    Billiyam    1107     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More