🔹 Position چیه؟

ویژگی position مشخص می‌کنه یک المان چطور نسبت به والد یا صفحه قرار بگیره.
این ویژگی پایه‌ای برای ساختن منوهای شناور، مدال‌ها، دکمه‌های ثابت، tooltip و … هست.

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

• static → موقعیت پیش‌فرض (بدون تغییر).

• relative → موقعیت نسبی نسبت به جای اصلی خودش.

• absolute → موقعیت مطلق نسبت به نزدیک‌ترین والد positioned.

• fixed → ثابت نسبت به کل صفحه (حتی با اسکرول).

• sticky → بین حالت نسبی و ثابت؛ تا وقتی داخل والدش اسکرول می‌کنه حرکت می‌کنه و بعد به لبه می‌چسبه.

🔹 مثال (static) – پیش‌فرض

<div class="static bg-blue-200 p-2">
  این یک المان با موقعیت static هست.
</div>

🔹 مثال (relative + absolute)

<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute bottom-0 right-0 bg-blue-500 text-white p-1">
    گوشه پایین-راست
  </div>
</div>

📌 والد relative باعث میشه المان absolute داخل همون ظرف تراز بشه.

🔹 مثال (fixed)

<div class="fixed top-0 right-0 bg-red-500 text-white p-2">
  دکمه ثابت
</div>

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

🔹 مثال (sticky)

<div class="h-40 overflow-y-auto border">
  <h2 class="sticky top-0 bg-yellow-300 p-2">عنوان ثابت</h2>
  <p>متن طولانی برای تست اسکرول...</p>
  <p>متن طولانی برای تست اسکرول...</p>
  <p>متن طولانی برای تست اسکرول...</p>
  <p>متن طولانی برای تست اسکرول...</p>
  <p>متن طولانی برای تست اسکرول...</p>
</div>

📌 عنوان وقتی اسکرول می‌کنی به بالای ظرف می‌چسبه.

🔹 کلاس‌های کمکی برای Position

بعد از تعیین position می‌تونی با این کلاس‌ها موقعیت دقیق رو مشخص کنی:

• top-0 / right-0 / bottom-0 / left-0

• inset-0 → همه جهات رو 0 می‌کنه.

• میشه مقدار spacing هم داد: top-4, right-2, left-10, ...

🔹 نکته مهم

• همیشه یادت باشه absolute بدون والد relative درست عمل نمی‌کنه.

• sticky فقط وقتی کار می‌کنه که والدش overflow: hidden/auto/scroll نداشته باشه.

• ترکیب position با z-index (z-10, z-50) برای لایه‌بندی خیلی مهمه.