सीएसएस लेआउट - जी-इंडेक्स एट्रिब्यूट

z-index विशेषता एलिमेंट के स्टैकिंग ऑर्डर निर्दिष्ट करती है。

z-index विशेषता

जब एलिमेंट स्थानांकित होते हैं, तो वे अन्य एलिमेंटों से ओवरलैप कर सकते हैं。

z-index विशेषता एलिमेंट के स्टैकिंग ऑर्डर (कौन सा एलिमेंट पहले, कौन सा एलिमेंट बाद में) निर्दिष्ट करती है。

एलिमेंट का स्टैकिंग ऑर्डर सकारात्मक या नकारात्मक हो सकता है:

यह एक शीर्षक है

क्योंकि इमेज के z-index सत्य है, इसलिए यह पाठ के पीछे रखा जाएगा。

उदाहरण

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

स्वयं आजमाएं

ध्यान दें:z-index केवलस्थानांकन एलिमेंट（position: absolute、position: relative、position: fixed या position: sticky）औरफ्लेक्स एलिमेंट（display: flex एलिमेंट के प्रत्यक्ष संतति एलिमेंट)।

एक और 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">ब्लैक बॉक्स</div>
  <div class="gray-box">ग्रे बॉक्स</div>
  <div class="green-box">ग्रीन बॉक्स</div>
</div>
</body>
</html>

स्वयं आजमाएं

बिना z-index के मौजूदगी

अगर दो निर्दिष्ट स्थानांकन एलिमेंट बिना निर्दिष्ट z-index के रूप में ओवरलैप होगाHTML कोड में अंतिम वर्णितएलिमेंट अधिकतम पर दिखाया जाएगा。

उदाहरण

इस उदाहरण के समान, लेकिन यहाँ पर निर्दिष्ट नहीं किया गया z-index：

<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">ब्लैक बॉक्स</div>
  <div class="gray-box">ग्रे बॉक्स</div>
  <div class="green-box">ग्रीन बॉक्स</div>
</div>
</body>
</html>

स्वयं आजमाएं

CSS अट्रिब्यूट

अट्रिब्यूट वर्णन
z-index एलिमेंट की स्टैकिंग ऑर्डर सेट करना