Layers CSS

Berdasarkan tutorial sebelumnya ada kemungkinan bahwa element HTML bergeser dan menumpuk. Dengan CSS maka kita bisa memodifikasi element mana yang akan ditampilkan paling atas dan element berikutnya sampai element paling bawah.

Dengan CSS maka kita bisa menentukan prioritas untuk setiap element HTML. Element yang ditampilkan paling atas adalah element yang memiliki prioritas paling besar apabila ada dua eement yang tumpang tindih.

Untuk memodifikasi secara manual skala prioritas element HTML maka kita bisa menggunakan z-index. Semakin tinggi nilai z-index maka element HTML tersebut akan ditempatkan paling atas.

Code CSS z-index:

z-index:
h4{
position: relative;
top: 30px;
left: 50px;
z-index: 3;
background-color: #79DDDD;
}

p {
position: relative;
z-index: 1;
background-color: #FFCCCC;
}

Hasil code CSS z-index:

Header ini memiliki Z-Index = 3

Paragraph ini tumpang tindih dengan header diatas. Paragraph ini memiliki z-index = 1 yang lebih kecil daripada header diatas sehingga paragraph ini ditempatkan paling bawah.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>