Cara Menggunakan Z-Index Di CSS

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.