Ada banyak fitur baru yang dikenalkan di CSS3, salah satunya adalah property z-index. z-index adalah sebuah property css yang digunakan untuk mengatur sebuah posisi element terhadap sumbu z. Kalau sebelumnya kita mengenal ada sumbu x (horizontal) dan sumbu y (vertikal), kali ini kita gunakan sumbu z (3 dimensi). Property z-index sendiri bukanlah pengatur element 3 dimensi, yang dimaksudkan disini adalah z-index mengatur posisi sebuah element, bagaimana element tersebut diposisikan di depan atau belakang element lain dalam sebuah html. Anda suka menggunakan editor foto? Pasti mengenal istilah layer. Ya, z-index memiliki fungsi yang sama dengan layer. z-index memiliki nilai integer, artinya dapat diisi nilai 0 sampai nilai maximum 2147483647 (32bit ). Ada pula browser lain yang mengenal nilai negatif di bawah 0. Berikut contoh penggunaan z-index :

.bingkaifoto{

        color: red;

        z-index: 1;

}

.foto{

       color: blue;

       z-index: 2;

}

Kode di atas bisa diartikan, element foto pasti berada di atas element bingkaifoto. Dalam dunia nyata pun sebuah foto pasti diletakkan di atas bingkai foto, jika tanpa kaca 😀 Semoga bermanfaat 🙂