فصل 8 از 27 درس 2 از 2

Position، Z-Index و Overflow

Overflow و Z-Index

بخشی از آموزش جامع Tailwind CSS

محتوای درس Overflow و Z-Index

Overflow و Z-Index را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

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

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

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

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

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

index.html
<div class="relative">
  <button class="rounded-lg border px-4 py-2">منو</button>
  <div class="absolute end-0 top-full z-50 mt-2 w-56 rounded-xl bg-white p-3 shadow-xl">
    Dropdown content
  </div>
</div>

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

Dropdown روی سایر عناصر صفحه نمایش داده می‌شود.

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

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

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

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

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