🔹 Isolation چیه؟

خاصیت isolation در CSS تعیین می‌کنه که آیا یک المان یک کانتکست جدید برای ترکیب (stacking context) بسازه یا نه.
این موضوع بیشتر در مواقعی مهم میشه که با z-index و لایه‌بندی عناصر کار می‌کنی.

🔹 کلاس‌های Isolation در Tailwind

• isolate → یک stacking context جدید برای المان ایجاد می‌کنه.

• isolation-auto → حالت پیش‌فرض مرورگر (المان stacking context جدید نمی‌سازه).

🔹 مثال ساده (بدون isolate)

<div class="relative z-10 bg-blue-300 p-4">
  Box 1 (z-10)
</div>
<div class="relative z-20 bg-green-300 p-4 -mt-6">
  Box 2 (z-20)
</div>

📌 اینجا چون Box 2 مقدار z-index بیشتری داره، روی Box 1 قرار می‌گیره.

🔹 مثال با isolate

<div class="isolate relative z-10 bg-blue-300 p-4">
  Box 1 (isolate, z-10)
  <div class="relative z-20 bg-yellow-300 p-2 -mt-4">
    Child Box (z-20)
  </div>
</div>
<div class="relative z-0 bg-green-300 p-4 -mt-6">
  Box 2 (z-0)
</div>

📌 چون Box 1 خاصیت isolate داره، یک stacking context جداگانه ساخته.
در نتیجه Child Box با z-20 نمی‌تونه روی Box 2 (خارجی) قرار بگیره.

🔹 نکته مهم

• isolate بیشتر زمانی به کار میره که بخوای کنترل بیشتری روی لایه‌بندی عناصر داخل یک بخش داشته باشی.

• اگه مشکل داشتی که یک child با z-index روی المان‌های بیرون قرار می‌گرفت، می‌تونی با isolate جلوی این اتفاق رو بگیری.

• در پروژه‌های بزرگ (مثلاً کامپوننت‌های پیچیده UI) خیلی کاربردیه.