Relative، Absolute، Sticky و Fixed

Relative، Absolute، Sticky و Fixed را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Position جای عنصر را نسبت به جریان صفحه مشخص می‌کند. absolute به نزدیک‌ترین والد positionدار وابسته است، sticky تنها در محدوده والد خود می‌چسبد و z-index فقط در Stack Context قابل مقایسه معنا دارد.

روش پیاده‌سازی

1. والد مرجع را با relative مشخص کنید.
2. موقعیت را با insetهای منطقی مانند start و end تعیین کنید.
3. Overflow و z-index اجزای شناور را همراه هم آزمایش کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

<div class="relative overflow-hidden rounded-2xl">
  <img src="/cover.webp" alt="" class="h-72 w-full object-cover" />
  <span class="absolute end-4 top-4 rounded-full bg-black/70 px-3 py-1 text-xs text-white">
    جدید
  </span>
</div>

خروجی مورد انتظار

Badge روی گوشه تصویر با Position Absolute.

نکات مهم و خطاهای رایج

• overflow-hidden والد می‌تواند Dropdown یا Sticky را قطع کند.
• افزایش بی‌قاعده z-index مشکل Stack Context را حل نمی‌کند.

تمرین پیشنهادی

Badge یا Dropdown مثال را داخل یک Container اسکرول‌دار آزمایش کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS