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…

mengatur layer pada html dengan css

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

Dargombes Gaeshi

Dargombes Gaeshi

Mas bro, bisa minta contact person nya ga?
Bahasaweb.com

Bahasaweb.com

@Dargombes Gaeshi
silahakan gunakan contact form yang ada di halaman contact pada situs ini.
Balas #74
Wuklin Moose

Wuklin Moose

Lengkap banget :D. Keren deh ni bahasaweb.
Balas #2034
Aris Munandar

Aris Munandar

@Wuklin Moose
semoga bermanfaat
Balas #2039
Debrixnow

Debrixnow

udh mntap
Balas #2155
Terima kasih telah memilih untuk meninggalkan komentar. Harap diingat bahwa semua komentar dimoderasi sesuai dengan kebijakan, dan informasi anda TIDAK akan dipublikasikan. Harap JANGAN gunakan kata kunci di kolom nama. Mari kita buat diskusi yang menarik dan bermakna.

Tinggalkan komentar

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

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.