z-index kısaca sayfanızdaki yatay-dikey hedefleri birbirine çakışan objelerinizden hangisinin altta veya üstte olmasına karar vermenizi sağlayan bir özelliktir.
Örneğin position değeri “absolute” olan aşağıdaki gibi 2 adet alanınız var;
#alan1 {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 20px;
background: #000000;
color: #FFFFFF;
}
#alan2 {
position: absolute;
left: 80px;
top: 30px;
width: 80px;
height: 80px;
background: #FFFFFF;
color: #000000;
border: #000000 1px solid;
}
ve sayfanıza ait tüm betik kodları aşağıdaki gibi olsun:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>z-index</title>
<style type=”text/css”>
#alan1 {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 20px;
background: #000000;
color: #FFFFFF;
}
#alan2 {
position: absolute;
left: 80px;
top: 30px;
width: 80px;
height: 80px;
background: #FFFFFF;
color: #000000;
border: #000000 1px solid;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<div id=”alan1″>alan1</div>
<div id=”alan2″>alan2</div>
</body>
</html>
alan1 ve alan2 adlı alanlara ait left ve top özellikleri birbirlerine çakıştıklarından tarayıcımızda aşağıdaki gibi bir çıktı elde ederiz:
Burada sayfa kodlanırken ilk olarak alan1 adlı alan yazıldığından alan2 adlı alanın altında kaldı. Yani tarayıcımız alanlarımızı yazdığımız betikteki sıraya göre yerleştirdi.
İşte z-index bu sıralamayı kendimiz yapmamızı sağlayan bir özelliktir. Örneğin ilgili örnekteli alan1 adlı alanı alan2 adlı alanın üstüne çıkarmak için iki alanada çeşitli z-index değerleri verebiliriz. Burada dikkat etmemiz gereken vereceğimiz değer sayfaya yüklenme sırasıdır. Yani büyük değer üstte gözükür.
Örnek üzerinde açıklamak gerekirse alan1 adlı alana aşağıdaki gibi alan2 adlı alandan daha büyük bir değer verirsek üste çıkacaktır:
#alan1 {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 20px;
background: #000000;
color: #FFFFFF;
z-index:2;
}
#alan2 {
position: absolute;
left: 80px;
top: 30px;
width: 80px;
height: 80px;
background: #FFFFFF;
color: #000000;
border: #000000 1px solid;
z-index:1;
}
konu hakkında anlaşılmayan bir nokta olursa lütfen çekinmeden sorunuz..
