CSS The z-index Property

خاصیت `z-index` چیست؟

* خاصیت `z-index` در CSS تعیین می‌کند که عناصر روی هم چگونه روی یکدیگر چیده شوند (ترتیب قرارگیری در محور عمق).
* عنصری که مقدار `z-index` بیشتری دارد، روی عنصر با مقدار کمتر نمایش داده می‌شود.
* `z-index` فقط روی عناصری که مقدار `position` آنها غیر از `static` باشد (مثل `relative`، `absolute`، `fixed` یا `sticky`) کار می‌کند.

—

 نحو (Syntax)

css 

selector {
position: relative; /* یا absolute، fixed، sticky */
z-index: عدد;
}

“`

* `عدد`: یک عدد صحیح (می‌تواند مثبت، منفی یا صفر باشد).
* مقدار پیش‌فرض `auto` است که ترتیب نمایش را بر اساس ترتیب عناصر در کد HTML تعیین می‌کند.

—

نحوه عملکرد

* عنصری که مقدار `z-index` بالاتری دارد، **روی بقیه قرار می‌گیرد**.
* اگر دو عنصر مقدار `z-index` یکسان داشته باشند، عنصری که در کد HTML بعدی آمده باشد روی دیگری قرار می‌گیرد.
* مقادیر منفی باعث می‌شوند عنصر **پشت سایر عناصر** قرار گیرد.

—

 مثال

“`html  

<style>
.box1 {
   position: absolute;
   left: 20px;
   top: 20px;
   width: 100px;
   height: 100px;
   background-color: red;
   z-index: 1;
}

.box2 {
   position: absolute;
   left: 60px;
   top: 60px;
   width: 100px;
   height: 100px;
   background-color: blue;
   z-index: 2;
}
</style>

<div class=“box1”></div>
<div class=“box2”></div>

“`

* در این مثال، کادر آبی (`.box2`) روی کادر قرمز (`.box1`) قرار می‌گیرد چون مقدار `z-index` آن بزرگ‌تر است (`2` در مقابل `1`).

—

نکات مهم

* z-index فقط روی عناصری کار می‌کند که position آنها غیر از static باشد.
* اگر position تعیین نشده باشد، `z-index` تاثیری ندارد.
* همچنین ایجاد context لایه‌بندی می‌تواند با ویژگی‌های دیگری مثل opacity کمتر از 1، transform   ,   filter و غیره هم ایجاد شود.