Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS

Belajar CSS - Mengenal z-index pada CSS

Oleh Wahyup Posting Komentar
Beberapa hal yang dalam pendukung pembuatan sebuah website selain Position CSS, Tata Letak CSS, Display dan lain lain,  yaitu salah satu nya z-index. Dan di kesempatan ini kita akan mencoba untuk membahas z-index tesebut.
Jika teman teman sebelumnya ingin melihat tentang apa saja yang sudah kita pelajari maka teman teman bisa melihat di link ini Belajar CSS.

Z index CSS
Z-Index pada CSS

Selamat Datang kembali teman teman, pada artikel ini kita akan membahas tentang Apa itu z-index pada CSS, nah disini ada beberapa pembahasan yaitu.

Pembahasan

  1. Penjelasan Z-index
  2. Contoh
Oke langsung saja kita masuk kedalam pembahasan

Penjelasan z-index

Jika teman teman sebelumnya sudah menggunakan position absolute atau fixed yang sudah kita pelajari kemarin, nah hasilnya pasti akan berada di atas elemen yang tidak menggunakan position tersebut kan,
Nah jadi disini kita menggunakan z-index untuk mengatur nya.

z-index adalah sebuah property yang ada pada CSS, yaitu berfungsi untuk mengatur tahta di dalam elemen pada CSS

Jika teman teman sudah pernah menggunakan Adobe Photoshop, nah disitu kan ada layer layer gitu, jadi bisa dibilang z-index itu adalah layer di sebuah Website.

Contoh Pembahasan z-index

Oke pada bagian ini, kita akan mencoba untuk mengaplikasikan sebuah property z-index di CSS. Oke langsung saja yah.

Pembuatan index.html

Nah disini saya akan membuat sebuah file index.html, dan akan saya jadikan satu dengan CSS nya, hal seperti ini sudah pernah kita bahas pada materi Belajar CSS yaitu tentang Penulisan CSS Internal.

//index.html
<html>
    <head>
        <meta charset="UTF-8" />
        <title>z-index</title>
        <style>
            div {
                text-align: center;
            }
            #box1 {
                position: absolute;
                width: 100px;
                height: 100px;
                margin-top: 50px;
                margin-left: 10px;
                background: #00ffab;
                z-index: -10;
            }
            #box11 {
                position: absolute;
                width: 100px;
                height: 100px;
                margin-top: 50px;
                margin-left: 200px;
                background: #00ffab;
                z-index: -10;
            }
            #box2 {
                position: absolute;
                width: 100px;
                height: 100px;
                top: 120px;
                left: 30px;
                background: #00aeff;
                z-index: 1;
            }
            #box22 {
                position: absolute;
                width: 100px;
                height: 100px;
                top: 120px;
                left: 195px;
                background: #00aeff;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                Latihan Belajar CSS z-index
            </p>
        </div>
        <div>
            <p id="box1">Box1</p>
            <p id="box2">Box2</p>
        </div>
        <div>
            <p id="box11">Box1.1</p>
            <p id="box22">Box2.1</p>
        </div>
        <div>
            <p id="box11">Box1.1</p>
            <p id="box22">Box2.1</p>
        </div>
    </body>
</html>

Jika diperhatikan , hasil dari index.html diatas adalah seperti ini


See the Pen
z-index by Wahyu Pambudi (@wahyup)
on CodePen.

Penjelasan Singkat

Jika dilihat source code diatas,
Pada box1 dan box2 itu berbeda pada bagian z-index nya, kenapa? Jika nilai z-index pada box1 : 2, maka box1 akan berada diatas box2 dan sebaliknya.
Oke baiklah teman teman, mungkin seperti itu untuk z-index nya, Semoga Bermanfaat!
Salam Semangat!!

Posting Komentar untuk "Belajar CSS - Mengenal z-index pada CSS"