Properti Z-Index CSS

View Categories

Properti Z-Index CSS

Properti z-index pada CSS dapat menentukan urutan beberapa elemen yang saling bertumpuk atau menempati ruang yang sama.

Properti z-index

Bila elemen diposisikan (mempunyai nilai properti position dan bernilai selain static), elemen tersebut dapat tumpang tindih dengan elemen lain.

Properti z-index menentukan urutan tumpukan elemen (elemen mana yang harus ditempatkan di depan, atau di belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>Ini adalah judul</h1>
<img src="img_tree.png">
<p>Karena gambar memiliki propert z-index bernilai -1, gambar akan ditempatkan di belakang teks.</p>

</body></html>

Jalankan Contoh

Catatan: z-index hanya berfungsi pada elemen yang diposisikan (position: absolute, position: relative, position: fixed, atau position: sticky) dan item fleksibel (elemen yang merupakan turunan langsung dari elemen display: flex).

Contoh z-index lainnya

Contoh

Pada contoh di bawah ini terlihat bahwa elemen dengan urutan tumpukan yang lebih besar selalu berada di atas elemen dengan urutan tumpukan yang lebih rendah:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3; /* gray box will be above both green and black box */
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2; /* green box will be above black box */
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Contoh properti z-index</h1>

<p>Elemen dengan urutan z-index lebih besar selalu berada di atas elemen dengan urutan z-index lebih rendah.</p>

<div class="container">
<div class="black-box">Kotak hitam (z-index: 1)</div>
<div class="gray-box">Kotak abu-abu (z-index: 3)</div>
<div class="green-box">Kotak hijau (z-index: 2)</div>
</div>

</body></html>

Jalankan Contoh

Tanpa z-index

Jika dua elemen yang diposisikan saling tumpang tindih tanpa menentukan z-index , elemen yang ditentukan terakhir dalam kode HTML akan ditampilkan di atas.

Contoh

Contoh yang sama seperti contoh sebelumnya, tetapi di sini tanpa menentukan z-index :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Elemen yang tumpang tindih</h1>

<p>Jika dua elemen yang diposisikan tumpang tindih satu sama lain karena tidak memiliki nilai properti z-index,
elemen yang didefinisikan terakhir dalam kode HTML akan ditampilkan paling atas:</p>

<div class="container">
<div class="black-box">Kotak hitam</div>
<div class="gray-box">Kotak abu-abu</div>
<div class="green-box">Kotak hijau</div>
</div>

</body></html>

Jalankan Contoh

Contoh

Mengatur z-index untuk gambar:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>Properti z-index</h1>

<img src="logocss.png" width="100" height="140">

<p>Karena gambar memiliki nilai propert z-index -1, gambar akan ditempatkan di belakang judul.</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Properti Position CSS
Tutorial setelahnya : Properti Overflow CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan