لایه‌بندی (Z-index)

آشنایی با z-index در CSS، کنترل لایه‌بندی عناصر روی هم و Stacking Context

Z-index چیست؟

z-index مشخص می‌کند وقتی عناصر روی هم قرار می‌گیرند، کدام بالاتر (نزدیک‌تر به کاربر) نمایش داده شود. مثل لایه‌های فتوشاپ.

نکته مهم: فقط با position کار می‌کند

/* ❌ بی‌تأثیر — بدون position */
    .box {
        z-index: 100;  /* کار نمی‌کند */
    }
    
    /* ✅ کار می‌کند */
    .box {
        position: relative;
        z-index: 100;
    }

مقادیر z-index

مقدارتوضیح
autoپیش‌فرض — همان والد
عدد مثبتبالاتر از پیش‌فرض
عدد منفیپایین‌تر از پیش‌فرض
0همان سطح پیش‌فرض

قانون کلی

عدد بزرگ‌تر = لایه بالاتر:

.modal     { position: fixed; z-index: 9999; }
    .navbar    { position: sticky; z-index: 100; }
    .dropdown  { position: absolute; z-index: 50; }
    .card      { position: relative; z-index: 10; }
    .background { position: absolute; z-index: -1; }

سیستم z-index استاندارد

برای جلوگیری از هرج‌ومرج، یک سیستم لایه‌بندی تعریف کنید:

لایهZ-indexکاربرد
پس‌زمینه-1تصاویر پس‌زمینه
base0 یا autoمحتوای عادی
Dropdown100منوهای کشویی
Sticky/Fixed200هدر چسبان
Overlay900پوشش تیره
Modal1000پنجره مودال
Toast1100اعلان‌ها

Stacking Context (بافت لایه‌بندی)

⚠️ نکته پیشرفته: z-index فقط در همان Stacking Context معنا دارد. یک عنصر با z-index: 9999 داخل یک والد با z-index: 1، نمی‌تواند بالاتر از عنصری با z-index: 2 خارج از آن والد باشد.

چه چیزی Stacking Context می‌سازد؟

مشکل رایج: z-index کار نمی‌کند

/* ❌ مشکل: z-index بدون position */
    .dropdown {
        z-index: 100;  /* بی‌تأثیر */
    }
    
    /* ✅ راه‌حل */
    .dropdown {
        position: absolute;
        z-index: 100;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط