🔹 این ویژگی‌ها چیه؟

وقتی یک المان رو absolute, relative, fixed یا sticky می‌کنی، می‌تونی با استفاده از top, right, bottom, left موقعیت دقیقش رو مشخص کنی.

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

• top-{n} → فاصله از بالا

• right-{n} → فاصله از راست

• bottom-{n} → فاصله از پایین

• left-{n} → فاصله از چپ

📌 {n} همون spacing scale تیلوینده (مثل 0, 1, 2, 4, 8, 10, 20, …).

🔹 مثال ساده

<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute top-0 left-0 bg-blue-500 text-white p-1">
    بالا-چپ
  </div>
  <div class="absolute bottom-0 right-0 bg-red-500 text-white p-1">
    پایین-راست
  </div>
</div>

📌 یکی در بالا-چپ و یکی در پایین-راست قرار می‌گیره.

🔹 استفاده از inset

به جای نوشتن جداگانه می‌تونی از inset استفاده کنی:

• inset-0 → همه جهات = 0

• inset-x-0 → فقط چپ و راست = 0

• inset-y-0 → فقط بالا و پایین = 0

مثال

<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute inset-0 bg-green-300">
    پر کردن کل ظرف
  </div>
</div>

🔹 مقادیر منفی

می‌تونی مقادیر منفی هم بدی (برای بیرون زدن المان):

• -top-2 → بیرون زدن 0.5rem از بالا

• -right-4 → بیرون زدن 1rem از راست

<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute -top-2 -right-2 bg-purple-500 text-white p-1">
    بیرون زده
  </div>
</div>

🔹 نکته مهم

• این کلاس‌ها فقط وقتی کار می‌کنن که المان positioned باشه (absolute, fixed, relative, sticky).

• برای ساختن layoutهای پیچیده خیلی به کار میان (مثل منوها، مدال‌ها، tooltip).

• ترکیب inset با z-index خیلی رایجه برای طراحی UI.