Bilindiği üzere Photoshop' ta Layer dediğimiz Türkçe deyimiyle "Katmanlar" vardır. Bir katmanı diğer katmanın üzerine aldığınızda en üstte o katman aktif olur. Peki CSS 'te bunu nasıl yapabilirim diyenler için ise; z-index

CSS' te ki z-index' in tek farklı yanı rakamsal değerler almasıdır. Standart değer olarak 0 (Sıfır)' dır. Şimdi örnek uygulamamıza geçebiliriz.

İki adet div komutunu kullanarak ve bunlara id tanımlayarak kutu oluşturdum. Üstte görünmesini istediğim kutununn z-index değerini 1 yaptım. Bu da şu demektir; eğer bir kutu daha oluşturacak ve bununda en üstte görünmesini istiyorsanız z-index değerini 2 yapacaksınız demektir.

<style type="text/css">
<!--
#katman1 {
	background-color: #66CCFF;
	height: 300px;
	width: 300px;
	position: relative;
	z-index: 1;
}
#katman2 {
	height: 200px;
	width: 200px;
	position: absolute;
	background-color: #FFCCFF;
	left: 203px;
	top: 69px;
}
-->
</style>

<div id="katman1">KATMAN 1</div>
<div id="katman2">KATMAN 2</div>

Kaynak dosyayı indirmek için tıklayın