آموزش ویژگی z-index در CSS

Ratings
(0)

 

ویژگی z-index ترتیب روی هم قرار گرفتن عناصر را مشخص می کند.

آموزش ویژگی z-index در CSS

وقتی که عناصر با استفاده از ویژگی position موقعیت دهی شوند، ممکن است روی دیگر عناصر قرار گیرند. ویژگی z-index ترتیب روی هم قرار گرفتن(stack order) عناصر را مشخص می کند(یعنی چه عنصری در زیر و چه عنصری در رو قرار گیرد). یک عنصر می تواند یک z-index مثبت یا منفی داشته باشد.

این یک عنوان است

چونکه تصویر مورد نظر یک z-index برابر با 1- دارد، در زیر متن قرار می گیرد.

مثال شماره 1

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
امتحان کنید

نکته: ویژگی z-index تنها روی عناصر موقعیت داده شده، که position آنها روی یکی از مقادیر زیر تنظیم شده است، کار می کند:
1.position: absolute
2.position: relative  

3. position: fixed

4. position: sticky

همچنین ویژگی مذکور، روی آیتم های flex، یعنی عناصری که فرزند مستقیم عناصر display: flex هستند، کار می کند.

 یک مثال دیگر از z-index

مثال شماره 2

در اینجا، مشاهده می کنیم که یک عنصر که z-index بزرگتری دارد، همواره در بالای عنصری که این مقدار برای آن کمتر  است، قرار می گیرد:

<html dir="rtl">
<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

اگر دو عنصر که موقعیت دهی(position) شده اند، بدون اینکه z-index برای آنها مشخص شده باشد، روی یکدیگر قرار گیرند، عنصری که در آخر در کدهای HTML تعریف شده است، در بالا نشان داده خواهد شد.

مثال شماره 3

مثالی مانند مثال بالا، اما بدون استفاده از z-index :

 <html dir="rtl">
<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>
امتحان کنید

 

  • بازدید: 144

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال