🔹 Z-Index چیه؟

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

• مقدار بالاتر → روی المان‌های دیگه قرار می‌گیره.

• مقدار پایین‌تر → پشت المان‌های دیگه قرار می‌گیره.

📌 برای درست کار کردن z-index، المان باید positioned باشه (relative, absolute, fixed, sticky).

🔹 کلاس‌های Z-Index در Tailwind

• z-0

• z-10

• z-20

• z-30

• z-40

• z-50

و برای حالت‌های خاص:

• z-auto → مقدار پیش‌فرض مرورگر.

• -z-10 → مقدار منفی (برای بردن المان پشت همه).

🔹 مثال ساده

<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute top-5 left-5 w-20 h-20 bg-blue-500 z-10">z-10</div>
  <div class="absolute top-10 left-10 w-20 h-20 bg-red-500 z-20">z-20</div>
  <div class="absolute top-14 left-14 w-20 h-20 bg-green-500 z-30">z-30</div>
</div>

📌 سبز بالاتر از قرمز و قرمز بالاتر از آبی نمایش داده میشه.

🔹 مثال (z منفی)

<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute top-5 left-5 w-28 h-28 bg-yellow-400">پیش‌فرض</div>
  <div class="absolute top-8 left-8 w-28 h-28 bg-purple-500 -z-10 text-white">
    پشت همه
  </div>
</div>

📌 المان بنفش میره پشت ظرف اصلی.

🔹 نکته مهم

• همیشه یادت باشه position لازمه تا z-index عمل کنه.

• برای مدال‌ها، دیالوگ‌ها، منوها و المان‌های شناور خیلی استفاده میشه.

• استفاده بیش‌ازحد از z-index می‌تونه مدیریت لایه‌ها رو سخت کنه؛ بهتره مقادیر منطقی (مثل 10, 20, 30) انتخاب بشن.