Layer Pada Html Dengan CSS
Bagi pembaca yang biasa menggunakan perangkat lunak desain seperti photoshop tentu sudah sangat familiar dengan layer, sedikit penulis jelaskan tentang layer. Layer adalah sebuah lapisan elemen yang dapat bertumpukan namun tidak menjadi satu yang digunakan untuk menentukan suatu objek, nah layer pada html ini yang akan kita bahas, dimana kita dapat membuat layer pada html dengan css, karna css lah yang dapat mengatur elemen html.
Untuk dapat membuat layer pada html dengan css ini dengan menggunakan properti z-index, fungsi dari properti z-index ini tidak berbeda dengan layer pada photoshop, sama-sama berguna untuk menumpuk sebuah elemen tetapi memisahkannya satu sama lain dengan masing-masing object didalamnya.
Cara Membuat Layer Pada HTML Dengan CSS
Nilai pada properti z-index ini yang perlu diingat adalah bahwa kita dapat menggunakan nilai negatif untuk menentukan sebuah elemen dibawah elemen 0, namun dibeberapa browser hal tersebut tidak dapat bekerja, maka sangat dianjurkan menggunakan nilai positif untuk mengatur layer pada css dengan css ini.
elemen {
  z-index: 1; // bahwa elemen akan berada pada layer 1
}Code language: JavaScript (javascript)Berikut ini adalah contoh lengkapnya…
<!DOCTYPE html>
<html>
<head>
<title>Layer</title>
<style type="text/css">
body {
margin-top: 15%;
margin-left: 32%;
width: 500px;
height: 150px;
}
.layer-1 {
position: relative;
<span style="color: #ff0000;">z-index: 1;</span>
background-color: black;
width: 200px;
height: 100px;
}
.layer-2 {
position: relative;
<span style="color: #ff0000;">z-index: 2;</span>
background-color: blue;
width: 200px;
height: 100px;
margin-top: -25%;
margin-left: 5%;
}
.layer-3 {
position: relative;
<span style="color: #ff0000;">z-index: 3;</span>
background-color: red;
width: 200px;
height: 100px;
margin-top: -25%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
</body>
</html>Code language: HTML, XML (xml)Berikut ini hasilnya…
Terlihat pada source-code diatas sebuah elemen html bertumpuk dengan masing-masing posisi tumpukan elemen tersebut yang telah ditentukan dengan menggunakan properti z-index diatas, hal tersebut tentunya sangat mempermudah untuk memanipulasi elemen sama halnya dengan photoshop, sebuah elemen yang tidak tercampur dengan elemen lain tentunya akan sangat mudah membuat desain sesuai dengan keinginan sendiri.
5 Komentar