z-index प्रॉपर्टी

z-index प्रॉपर्टी यह सेट करती है कि कौन सा एलिमेंट ऊपर होगा, यदि कई एलिमेंट एक-दूसरे पर ओवरलैप होते हैं।

सिंटैक्स

सिलेक्टर {
	z-index: संख्या | auto;
}

संख्या पूर्णांक, धनात्मक या ऋणात्मक होनी चाहिए। शून्य भी हो सकती है।

वैल्यूज

वैल्यू	विवरण
संख्या	पूर्णांक संख्या एलिमेंट्स के ओवरलैपिंग का क्रम निर्धारित करती है: जब एलिमेंट एक-दूसरे पर ओवरलैप होते हैं, तो ऊपर वह एलिमेंट होगा, जिसका `z-index` अधिक होगा।
`auto`	ओवरलैपिंग का क्रम स्वचालित रूप से बनता है: ऊपर वह एलिमेंट होगा, जो HTML कोड में नीचे स्थित होगा।

डिफॉल्ट वैल्यू: auto.

उदाहरण

इस उदाहरण में, ब्लॉक एक-दूसरे पर HTML कोड में उनके क्रम के अनुसार ओवरलैप होंगे (z-index सेट नहीं है और इसकी वैल्यू डिफॉल्ट - auto होगी)। पहला ब्लॉक सबसे नीचे होगा (लाल), और अंतिम ब्लॉक - सबसे ऊपर (हरा):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

उदाहरण

z-index सेट करके ओवरलैपिंग का क्रम बदलते हैं। लाल ब्लॉक को - 3, नीले ब्लॉक को - 2, हरे ब्लॉक को - 1 दिया गया है। ओवरलैपिंग का क्रम उल्टा हो जाएगा (सबसे ऊपर वह ब्लॉक होगा जिसका z-index 3 है):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}