सीएसएस लेआउट - जेड-इंडेक्स संपत्ति
गुण किसी तत्व के स्टैक क्रम को z-indexनिर्दिष्ट करता है।
जेड-इंडेक्स संपत्ति
जब तत्व स्थित होते हैं, तो वे अन्य तत्वों को ओवरलैप कर सकते हैं।
गुण किसी तत्व के स्टैक क्रम को z-indexनिर्दिष्ट करता है (कौन सा तत्व दूसरे के सामने या पीछे रखा जाना चाहिए)।
एक तत्व में सकारात्मक या नकारात्मक स्टैक ऑर्डर हो सकता है:
यह एक शीर्षक है
चूँकि छवि का z-अनुक्रमणिका -1 है, इसलिए इसे पाठ के पीछे रखा जाएगा।
उदाहरण
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
नोट: z-index केवल स्थित तत्वों पर काम करता है (स्थिति: पूर्ण, स्थिति: सापेक्ष, स्थिति: निश्चित, या स्थिति: चिपचिपा) और फ्लेक्स आइटम
(तत्व जो प्रदर्शन के प्रत्यक्ष बच्चे हैं: फ्लेक्स तत्व)।
एक और जेड-इंडेक्स उदाहरण
उदाहरण
यहां हम देखते हैं कि अधिक स्टैक ऑर्डर वाला तत्व हमेशा निचले स्टैक ऑर्डर वाले तत्व से ऊपर होता है:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
जेड-इंडेक्स के बिना
z-index
यदि दो स्थित तत्व एक निर्दिष्ट के बिना एक दूसरे को ओवरलैप करते हैं , तो HTML कोड में अंतिम परिभाषित तत्व शीर्ष पर दिखाया जाएगा।
उदाहरण
ऊपर जैसा ही उदाहरण है, लेकिन यहां कोई जेड-इंडेक्स निर्दिष्ट नहीं है:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
सीएसएस संपत्ति
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |