سی ایس ایس کیویر - زیرو کوئئر کیئر

z-index پرزن معین کرنے والی پرزن。

z-index پرزن

عنصر کی پوزیشن یابی کی وجہ سے، وہ دیگر عناصر کے ساتھ منظم ہوسکتا ہے。

z-index پرزن کی ترتیب معین کرنے والی پرزن (کوئی عنصر کے اوپر کی طرح، کوئی عنصر کے پیچھے کی طرح)。

عنصر کی کھپت کی ترتیب مثبت یا منفی کا عدد کا ہو سکتا ہے:

یہ ایک عنوان ہے

چونکہ تصویر کا z-index کے لئے -1، اس لئے یہ متن کے پیچھے رکھا جائے گا。

مثال

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">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">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">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

خود کا تجربہ کریئن

CSS کا حصہ

کا حصہ توضیح
z-index عنصر کی کچھتا اپنائی جانا