BenoService

آکادمی بنو/آموزش Tailwind

Position، Container و Overflow در Tailwind CSS

بهنام نوبخت · ۱۴۰۵/۷/۱۳

تا اینجا با بخش‌های مهمی از Tailwind CSS مانند رنگ‌ها، Typography، Spacing، Border، Shadow، Flexbox و Grid آشنا شدیم و یاد گرفتیم چگونه عناصر یک صفحه را مرتب و زیبا کنیم. اما در پروژه‌های واقعی گاهی لازم است موقعیت یک عنصر را دقیقاً کنترل کنیم، یک عنصر را نسبت به عنصر دیگری قرار دهیم، عرض محتوای صفحه را محدود کنیم یا مشخص کنیم اگر محتوای یک عنصر از محدوده آن خارج شد چه اتفاقی بیفتد. Tailwind CSS برای این کار Utilityهای مربوط به Position، Container و Overflow را در اختیار ما قرار می‌دهد.

بخش اول — Position چیست؟

ویژگی position در CSS مشخص می‌کند که یک عنصر چگونه در صفحه قرار بگیرد.

در CSS معمولی با مقادیری مانند:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

کار می‌کنیم.

در Tailwind CSS نیز برای هرکدام Utilityهای مخصوصی داریم.

مهم‌ترین آن‌ها:

static
relative
absolute
fixed
sticky

هستند.

Static

حالت پیش‌فرض اکثر عناصر در CSS، static است.

در Tailwind:

<div class="static">
    Content
</div>

در این حالت عنصر طبق جریان عادی صفحه قرار می‌گیرد.

در بیشتر پروژه‌ها معمولاً نیازی نیست static را به صورت صریح بنویسیم، چون حالت پیش‌فرض است.

Relative

یکی از مهم‌ترین Positionها:

relative

است.

مثال:

<div class="relative">
    Content
</div>

relative به تنهایی ممکن است تغییر ظاهری قابل توجهی ایجاد نکند، اما اهمیت آن زمانی مشخص می‌شود که بخواهیم یک عنصر absolute را نسبت به آن قرار دهیم.

یکی از کاربردهای اصلی relative، ایجاد یک مرجع برای عناصر absolute است.

Absolute

با:

absolute

می‌توانیم یک عنصر را از جریان عادی Layout خارج کنیم و موقعیت آن را نسبت به نزدیک‌ترین والد Position‌شده کنترل کنیم.

برای مثال:

<div class="relative">

    <span class="absolute right-0 top-0">
        Badge
    </span>

</div>

در این مثال:

relative

روی والد قرار دارد و:

absolute

روی Badge قرار گرفته است.

top، right، bottom و left

برای تعیین موقعیت یک عنصر Position شده، Tailwind Utilityهایی مانند موارد زیر دارد:

top-0
right-0
bottom-0
left-0

برای مثال:

<div class="relative">

    <div class="absolute top-0 right-0">
        Top Right
    </div>

</div>

یعنی عنصر در قسمت بالای سمت راست والد Position شده قرار می‌گیرد.

همچنین می‌توان از مقادیر مختلف استفاده کرد:

top-2
top-4
right-2
right-4
bottom-4
left-4

ساخت Badge روی تصویر

یکی از کاربردهای واقعی relative و absolute قرار دادن Badge روی تصویر است.

<div class="relative">

    <img
        src="product.jpg"
        alt="Product"
        class="h-64 w-full rounded-xl object-cover"
    >

    <span class="absolute right-4 top-4 rounded-full bg-red-600 px-3 py-1 text-sm text-white">
        Sale
    </span>

</div>

ساختار مفهومی:

+--------------------------------+
|                        [Sale]  |
|                                |
|            Image               |
|                                |
|                                |
+--------------------------------+

در این مثال:

<div class="relative">

عنصر والد را به مرجع Position تبدیل می‌کند.

و:

<span class="absolute right-4 top-4">

Badge را در گوشه بالای سمت راست قرار می‌دهد.

قرار دادن دکمه روی تصویر

یک مثال دیگر:

<div class="relative">

    <img
        src="banner.jpg"
        alt="Banner"
        class="h-80 w-full rounded-xl object-cover"
    >

    <button class="absolute bottom-4 left-4 rounded-lg bg-black/70 px-5 py-3 text-white">
        مشاهده بیشتر
    </button>

</div>

در اینجا دکمه در پایین سمت چپ تصویر قرار می‌گیرد.

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

استفاده از inset

Tailwind Utilityهای دیگری نیز برای تعیین فاصله از چند جهت دارد.

برای مثال:

inset-0

می‌تواند عنصر را از چهار طرف روی محدوده والد قرار دهد.

مثال:

<div class="relative">

    <img
        src="image.jpg"
        alt="Image"
        class="h-64 w-full object-cover"
    >

    <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-2xl font-bold text-white">
            Welcome
        </span>
    </div>

</div>

در این مثال:

absolute inset-0

باعث می‌شود Overlay تمام فضای والد را پوشش دهد.

سپس با:

flex items-center justify-center

متن در مرکز قرار می‌گیرد.

ساختار مفهومی:

+--------------------------------+
|                                |
|                                |
|            Welcome             |
|                                |
|                                |
+--------------------------------+

ساخت Overlay

این تکنیک برای ساخت Overlay بسیار مهم است.

مثال:

<div class="relative overflow-hidden rounded-xl">

    <img
        src="hero.jpg"
        alt="Hero"
        class="h-80 w-full object-cover"
    >

    <div class="absolute inset-0 bg-black/50"></div>

    <div class="absolute inset-0 flex items-center justify-center">
        <h1 class="text-4xl font-bold text-white">
            Welcome
        </h1>
    </div>

</div>

در این ساختار:

Container
│
├── Image
│
├── Overlay
│
└── Content

این الگو در طراحی Hero Section بسیار رایج است.

Fixed چیست؟

گاهی می‌خواهیم یک عنصر نسبت به صفحه مرورگر در یک موقعیت ثابت باقی بماند.

برای این کار از:

fixed

استفاده می‌کنیم.

مثال:

<button class="fixed bottom-6 right-6 rounded-full bg-blue-600 px-5 py-3 text-white shadow-lg">
    Help
</button>

این دکمه در پایین سمت راست صفحه قرار می‌گیرد.

حتی با Scroll کردن صفحه نیز موقعیت آن نسبت به صفحه ثابت می‌ماند.

این روش برای مواردی مانند:

  • دکمه پشتیبانی

  • دکمه بازگشت به بالا

  • Floating Action Button

  • ابزارهای ثابت صفحه

کاربرد دارد.

Sticky چیست؟

نوع دیگری از Position:

sticky

است.

Sticky به یک عنصر اجازه می‌دهد در زمان Scroll رفتار چسبنده داشته باشد.

مثال:

<header class="sticky top-0 z-10 bg-white p-4 shadow">
    My Header
</header>

در اینجا:

sticky

و:

top-0

باعث می‌شوند Header هنگام Scroll در بالای صفحه باقی بماند.

برای استفاده صحیح از Sticky، شرایط Layout والد و محدوده Scroll نیز اهمیت دارد؛ بنابراین اگر Sticky رفتار مورد انتظار را نداشت، باید ساختار والدها و Overflow آن‌ها بررسی شود.

z-index چیست؟

گاهی چند عنصر روی یکدیگر قرار می‌گیرند و باید مشخص کنیم کدام عنصر بالاتر نمایش داده شود.

برای این کار از z-index استفاده می‌کنیم.

در Tailwind Utilityهایی مانند:

z-10
z-20
z-50

وجود دارند.

مثال:

<div class="relative z-10">
    Content
</div>

هرچه مقدار مناسب z-* بیشتر باشد، در شرایطی که عناصر در یک Stacking Context قابل مقایسه باشند، عنصر می‌تواند بالاتر قرار بگیرد.

مثال:

<div class="fixed right-6 bottom-6 z-50">
    Support
</div>

برای یک عنصر شناور مهم صفحه می‌توان از مقدار بالاتر استفاده کرد.

بخش دوم — Container چیست؟

در طراحی وب معمولاً نمی‌خواهیم محتوای صفحه در نمایشگرهای بسیار بزرگ تمام عرض صفحه را اشغال کند.

برای مثال، در یک مانیتور بزرگ ممکن است چنین چیزی داشته باشیم:

|----------------------------------------------------------|
|                                                          |
|                    Page Content                          |
|                                                          |
|----------------------------------------------------------|

اما معمولاً بهتر است محتوا یک عرض مناسب داشته باشد و در مرکز صفحه قرار بگیرد.

Tailwind برای این کار Utility به نام:

container

دارد.

مثال:

<div class="container">
    Page Content
</div>

Container یک Utility مخصوص برای مدیریت عرض محتوا در اندازه‌های مختلف صفحه است.

استفاده از mx-auto همراه Container

در بسیاری از Layoutها می‌توانیم برای قرار دادن محتوا در مرکز از:

mx-auto

استفاده کنیم.

مثال:

<div class="container mx-auto px-6">
    <h1 class="text-3xl font-bold">
        Website Content
    </h1>
</div>

در اینجا:

container

عرض Container را مدیریت می‌کند.

و:

mx-auto

Margin افقی Auto ایجاد می‌کند و به مرکز قرار گرفتن Container کمک می‌کند.

تفاوت Container و max-w

گاهی به جای container می‌توانیم از max-w-* استفاده کنیم.

مثلاً:

<div class="mx-auto max-w-5xl px-6">
    Content
</div>

در این حالت حداکثر عرض را با:

max-w-5xl

کنترل می‌کنیم.

این روش برای زمانی که بخواهیم عرض دقیق‌تر و مشخص‌تری داشته باشیم بسیار مفید است.

به صورت ساده:

container
    → Container based sizing

max-w-*
    → Maximum width control

ساخت Container برای صفحه وب

یک مثال عملی:

<main class="container mx-auto px-6">

    <h1 class="text-3xl font-bold">
        Products
    </h1>

    <p class="mt-3 text-gray-600">
        Explore our latest products.
    </p>

</main>

این ساختار می‌تواند پایه بسیاری از صفحات وب باشد.

بخش سوم — Overflow چیست؟

فرض کنید محتوای یک عنصر بیشتر از فضای موجود باشد.

مثلاً:

+----------------------+
| This is a very long  |
| content that does... |
|                      |
+----------------------+

در چنین شرایطی باید مشخص کنیم با محتوای اضافی چه کار شود.

CSS ویژگی overflow را برای همین موضوع دارد.

Tailwind نیز Utilityهای مختلفی برای آن ارائه می‌دهد.

مهم‌ترین موارد:

overflow-auto
overflow-hidden
overflow-visible
overflow-scroll

overflow-hidden

با:

overflow-hidden

محتوایی که از محدوده عنصر خارج شود، نمایش داده نمی‌شود.

مثال:

<div class="h-32 w-64 overflow-hidden rounded-lg border p-4">
    <p>
        این متن بسیار طولانی است و ممکن است از محدوده مشخص شده خارج شود.
        اگر محتوای بیشتری اضافه کنیم، بخش خارج از محدوده نمایش داده نخواهد شد.
    </p>
</div>

یکی از کاربردهای مهم overflow-hidden در کارت‌هایی است که تصویر آن‌ها باید داخل گوشه‌های Rounded باقی بماند.

مثال:

<div class="overflow-hidden rounded-xl">

    <img
        src="product.jpg"
        alt="Product"
        class="h-64 w-full object-cover"
    >

</div>

این الگو بسیار رایج است.

overflow-auto

با:

overflow-auto

در صورت نیاز Scroll ایجاد می‌شود.

مثال:

<div class="h-40 overflow-auto rounded-lg border p-4">
    <p>
        این یک متن طولانی است.
        این متن فقط برای نمایش نحوه عملکرد Overflow استفاده شده است.
        وقتی محتوا از ارتفاع Container بیشتر شود، امکان Scroll ایجاد می‌شود.
    </p>

    <p>
        Additional content...
    </p>

    <p>
        More content...
    </p>
</div>

اگر محتوا از محدوده خارج شود، مرورگر امکان Scroll را فراهم می‌کند.

overflow-scroll

با:

overflow-scroll

فضای Scroll همیشه در نظر گرفته می‌شود.

<div class="h-40 overflow-scroll border p-4">
    Content
</div>

در بسیاری از مواقع overflow-auto انتخاب طبیعی‌تری است، چون فقط زمانی که لازم باشد Scroll را ایجاد می‌کند.

کنترل Overflow افقی و عمودی

گاهی فقط می‌خواهیم Overflow یک جهت را کنترل کنیم.

برای جهت افقی:

overflow-x-auto

و برای جهت عمودی:

overflow-y-auto

مثال:

<div class="overflow-x-auto">
    ...
</div>

این روش برای محتوایی که عرض زیادی دارد بسیار مفید است.

ساخت جدول با Scroll افقی

یک کاربرد واقعی overflow-x-auto، نمایش جدول‌های بزرگ است.

<div class="overflow-x-auto">

    <table class="min-w-full border">
        <thead>
            <tr>
                <th class="border p-3">Name</th>
                <th class="border p-3">Email</th>
                <th class="border p-3">Phone</th>
                <th class="border p-3">Address</th>
                <th class="border p-3">Status</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td class="border p-3">John</td>
                <td class="border p-3">john@example.com</td>
                <td class="border p-3">123456</td>
                <td class="border p-3">New York</td>
                <td class="border p-3">Active</td>
            </tr>
        </tbody>
    </table>

</div>

اگر جدول از عرض Container بزرگ‌تر شود، کاربر می‌تواند به صورت افقی Scroll کند.

این تکنیک در پنل‌های مدیریت بسیار کاربردی است.

ترکیب Position و Overflow

حالا یک مثال کاربردی‌تر ایجاد کنیم.

فرض کنید یک کارت داریم که روی تصویر آن Badge قرار گرفته است و تصویر نباید از گوشه‌های کارت خارج شود.

<div class="relative overflow-hidden rounded-2xl border bg-white shadow">

    <img
        src="product.jpg"
        alt="Product"
        class="h-64 w-full object-cover"
    >

    <span class="absolute right-4 top-4 rounded-full bg-red-600 px-3 py-1 text-sm text-white">
        Sale
    </span>

    <div class="p-5">
        <h2 class="text-xl font-bold">
            Product Name
        </h2>

        <p class="mt-2 text-gray-600">
            Product description.
        </p>
    </div>

</div>

در این مثال چند مفهوم را با هم ترکیب کرده‌ایم:

relative
overflow-hidden
rounded-2xl
absolute
right-4
top-4

این ترکیب در ساخت کارت‌های مدرن بسیار مفید است.

ساخت Notification با Position

یک مثال دیگر، ایجاد Notification Badge روی Icon است:

<div class="relative inline-block">

    <button class="rounded-lg border p-3">
        🔔
    </button>

    <span class="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-red-600 text-xs text-white">
        3
    </span>

</div>

ساختار:

       [3]
      ┌───┐
      │ 🔔│
      └───┘

در اینجا:

relative

روی Container قرار دارد و Badge با:

absolute

نسبت به آن Position می‌شود.

Position با Negative Values

گاهی می‌خواهیم یک عنصر کمی از محدوده معمول خود خارج شود.

برای مثال:

-top-2

یا:

-right-2

می‌تواند یک عنصر را کمی به سمت بیرون حرکت دهد.

مثال:

<span class="absolute -right-2 -top-2 rounded-full bg-red-500 px-2 py-1 text-xs text-white">
    New
</span>

این تکنیک برای Badgeها بسیار کاربردی است.

یک مثال کامل: Hero Section

حالا یک Hero Section ساده با Position و Overflow ایجاد کنیم:

<section class="relative overflow-hidden rounded-2xl">

    <img
        src="hero.jpg"
        alt="Hero"
        class="h-[500px] w-full object-cover"
    >

    <div class="absolute inset-0 bg-black/50"></div>

    <div class="absolute inset-0 flex items-center justify-center p-6">
        <div class="max-w-2xl text-center text-white">

            <h1 class="text-4xl font-bold md:text-5xl">
                Build Your Future
            </h1>

            <p class="mt-4 text-lg">
                Create modern websites with Tailwind CSS.
            </p>

            <button class="mt-6 rounded-lg bg-white px-6 py-3 font-semibold text-gray-900">
                Get Started
            </button>

        </div>
    </div>

</section>

در این مثال:

relative
    ↓
Parent reference

absolute inset-0
    ↓
Overlay

flex items-center justify-center
    ↓
Center content

overflow-hidden
    ↓
Keep content inside rounded container

این نوع ساختار در صفحات Landing Page بسیار کاربردی است.

چه زمانی از Position استفاده کنیم؟

به صورت ساده:

از relative استفاده کنید وقتی:

  • می‌خواهید یک مرجع برای absolute ایجاد کنید.

  • می‌خواهید موقعیت یک عنصر را نسبت به جایگاه اصلی آن کنترل کنید.

از absolute استفاده کنید وقتی:

  • یک Badge روی تصویر دارید.

  • Icon یا Button باید در گوشه یک عنصر قرار بگیرد.

  • Overlay نیاز دارید.

  • یک عنصر باید نسبت به والد Position شود.

از fixed استفاده کنید وقتی:

  • عنصر باید نسبت به صفحه ثابت بماند.

  • دکمه پشتیبانی یا Floating Button دارید.

از sticky استفاده کنید وقتی:

  • می‌خواهید عنصر هنگام Scroll در محدوده مشخصی چسبنده باشد.

  • Header یا Navigation خاصی نیاز دارید.

چه زمانی از Overflow استفاده کنیم؟

overflow-hidden

برای:

  • مخفی کردن محتوای خارج‌شده

  • محدود کردن تصویر داخل کارت

  • ساخت Overlay

  • کنترل گوشه‌های Rounded

overflow-auto

برای:

  • محتوای طولانی

  • جدول‌های بزرگ

  • بخش‌هایی که ممکن است Scroll نیاز داشته باشند

overflow-x-auto

برای:

  • جدول‌های عریض

  • محتوای افقی

  • بعضی Layoutهای قابل Scroll

تمرین عملی

یک کارت محصول حرفه‌ای ایجاد کنید که ویژگی‌های زیر را داشته باشد:

  • تصویر محصول

  • relative روی Container

  • Badge با absolute

  • قیمت محصول

  • عنوان و توضیح

  • دکمه خرید

  • overflow-hidden

  • گوشه‌های Rounded

  • Shadow

  • یک Icon یا Badge روی تصویر

سپس یک Hero Section بسازید که شامل:

  • تصویر پس‌زمینه

  • Overlay

  • عنوان

  • توضیح

  • Button

  • استفاده از absolute

  • استفاده از inset-0

  • استفاده از Flexbox برای وسط‌چین کردن محتوا

باشد.

جمع‌بندی

در این مقاله با سه مفهوم مهم در Tailwind CSS آشنا شدیم:

Position

یاد گرفتیم از Utilityهای زیر استفاده کنیم:

static
relative
absolute
fixed
sticky

همچنین با:

top-*
right-*
bottom-*
left-*
inset-*
z-*

برای کنترل موقعیت و ترتیب نمایش عناصر آشنا شدیم.

Container

با container و ترکیب آن با Utilityهایی مانند:

mx-auto
px-6
max-w-*

می‌توانیم عرض و محدوده محتوای صفحه را بهتر مدیریت کنیم.

Overflow

با Utilityهای زیر آشنا شدیم:

overflow-hidden
overflow-auto
overflow-scroll
overflow-x-auto
overflow-y-auto

و یاد گرفتیم چگونه رفتار محتوایی را که از محدوده عنصر خارج می‌شود کنترل کنیم.

ترکیب این Utilityها با Flexbox و Grid به ما اجازه می‌دهد Layoutهای بسیار متنوع‌تری ایجاد کنیم.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.