z-index प्रॉपर्टी
z-index प्रॉपर्टी यह सेट करती है कि
कौन सा एलिमेंट ऊपर होगा, यदि कई एलिमेंट
एक-दूसरे पर ओवरलैप होते हैं।
सिंटैक्स
cssसिलेक्टर {
z-index: संख्या | auto;
}
संख्या पूर्णांक, धनात्मक या ऋणात्मक होनी चाहिए। शून्य भी हो सकती है।
वैल्यूज
| वैल्यू | विवरण |
|---|---|
| संख्या |
पूर्णांक संख्या एलिमेंट्स के ओवरलैपिंग का क्रम निर्धारित करती है:
जब एलिमेंट एक-दूसरे पर ओवरलैप होते हैं, तो ऊपर
वह एलिमेंट होगा, जिसका z-index अधिक होगा।
|
auto |
ओवरलैपिंग का क्रम स्वचालित रूप से बनता है: ऊपर वह एलिमेंट होगा, जो HTML कोड में नीचे स्थित होगा। |
डिफॉल्ट वैल्यू: auto.
उदाहरण
इस उदाहरण में, ब्लॉक एक-दूसरे पर HTML कोड में
उनके क्रम के अनुसार ओवरलैप होंगे
(z-index सेट नहीं है और इसकी
वैल्यू डिफॉल्ट - auto होगी)। पहला
ब्लॉक सबसे नीचे होगा (लाल), और अंतिम
ब्लॉक - सबसे ऊपर (हरा):
html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>css#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 है):
html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>css#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;
}
Результат: