ویژگی z-index مشخص می‌کنه که وقتی چند عنصر روی هم قرار می‌گیرن (overlap)، کدوم عنصر بالاتر نمایش داده بشه.

1️⃣ نحوه کارکرد z-index

• مقدار z-index فقط روی عناصری که position (مثل relative, absolute, fixed, sticky) دارن اثر می‌کنه.

• هرچه مقدار z-index بیشتر باشه، اون عنصر بالاتر (روی بقیه) قرار می‌گیره.

2️⃣ مقادیر z-index

🔸 مقدار پیش‌فرض → auto
یعنی براساس جریان عادی صفحه و والدها تعیین می‌شه.

🔸 عدد مثبت → عنصر بالاتر میاد.

.box1 {
  position: absolute;
  z-index: 10;
}
.box2 {
  position: absolute;
  z-index: 5;
}

📌 در این مثال، .box1 بالای .box2 نمایش داده می‌شه.

🔸 عدد منفی → عنصر زیر بقیه قرار می‌گیره.

.bg {
  position: absolute;
  z-index: -1;
}

📌 معمولاً برای بک‌گراند استفاده می‌شه.

3️⃣ نکات مهم

✅ فقط روی عناصر position‌دار (غیر از static) کار می‌کنه.
✅ اگر دو عنصر داخل یک والد باشن، z-index مقایسه می‌شه.
✅ اگر والدها خودشون z-index داشته باشن، اولویت والد تأثیر می‌ذاره → اینو بهش می‌گن stacking context.

4️⃣ مثال ساده

<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>

.box {
  width: 150px;
  height: 150px;
  position: absolute;
}

.red {
  background: red;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.blue {
  background: blue;
  top: 60px;
  left: 60px;
  z-index: 3; /* بالاترین */
}

.green {
  background: green;
  top: 100px;
  left: 100px;
  z-index: 2;
}

📌 در این مثال:

• آبی بالاتر از همه قرار می‌گیره.

• سبز وسطی می‌شه.

• قرمز زیر همه می‌مونه.