ترتیب لایه ها با z-index در CSS

در طراحی وب، گاهی لازم است اجزا روی هم قرار بگیرند: منوهای کشویی، مودال‌ها، تولتیپ‌ها یا تصاویر پس‌زمینهٔ چندلایه. صفت z-index در CSS ابزار اصلی برای کنترل ترتیب عمودی (عمق) عناصر است. اما استفادهٔ صحیح از z-index نیازمند درک عمیق از stacking context، خواص ایجادکنندهٔ زمینهٔ چیدمان و رفتار پیش‌فرض مرورگرهاست.

مبانی z-index

z-index عددی صحیح (می‌تواند منفی، صفر یا مثبت باشد) است که ترتیب چیدمان عنصری را نسبت به عناصر هم‌سطح مشخص می‌کند. هرچه مقدار بزرگتر باشد، عنصر جلو قرار می‌گیرد. اما شرط اصلی برای مؤثر بودن z-index این است که عنصر باید یک position غیر از static داشته باشد (مثلاً relative، absolute یا fixed) یا در برخی شرایط به‌صورت flex/grid child با ویژگی‌های خاص باشد.

مثال ساده

<div class="box a">A</div>
<div class="box b">B</div>

/* CSS */.box{ width:120px; height:120px; position:relative; }
.a{ background:#f66; z-index:1; left:20px; top:20px; }
.b{ background:#6af; z-index:2; left:60px; top:60px; }

در این مثال، دو بلوک با موقعیت نسبی تعریف شده‌اند. عنصر B با z-index:2 بالاتر از A نمایش داده می‌شود. اگر position را حذف کنید، z-index اثری نخواهد داشت.

Stacking Context چیست و چرا مهم است؟

Stacking context یک محیط ایزوله برای ترتیب‌دهی لایه‌هاست. هر stacking context مانند یک «قاب» عمل می‌کند که عناصر داخلی فقط نسبت به هم مرتب می‌شوند و نمی‌توانند لایهٔ بیرونی را به‌صورت مستقیم روی لایه‌های دیگر والد یا هم‌سطح‌شان بیاورند، حتی اگر z-index بالاتری داشته باشند.

چه چیزهایی stacking context ایجاد می‌کنند؟

لیستی از مهم‌ترین حالات ایجاد stacking context:

عنصر ریشه (root) صفحه
position: fixed یا position: absolute با z-index تعریف‌شده در برخی حالات
position غیر static با z-index متفاوت از auto
opacity کمتر از 1
transform (مثلاً transform: translateZ(0) یا rotate)
filter، perspective، isolation، will-change، mix-blend-mode و برخی خواص دیگر

ویژگی/شرط	آیا stacking context ایجاد می‌کند؟
opacity: 0.9	بله
transform: translateX(0)	بله
position: relative (بدون z-index)	معمولاً نه
position: relative + z-index	بله

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

یک مشکل متداول این است که برنامه‌نویس انتظار دارد عنصری با z-index بالاتر نسبت به همهٔ عناصر صفحه جلو بیاید، اما در عمل این اتفاق نمی‌افتد. دلیل معمول این است که آن عنصر داخل یک stacking context با مقدار z-index پایین‌تر قرار دارد و نمی‌تواند از آن خارج شود.

کد مشکل‌زا

<div class="parent">
  <div class="child-overlay">Overlay</div>
</div>
<div class="banner">Banner</div>

/* CSS */.parent{ position: relative; z-index:1; }
.child-overlay{ position: absolute; z-index:2; }
.banner{ position: relative; z-index:3; }

در ظاهر banner باید پشت child-overlay قرار بگیرد چون z-index:3 بالاتر است، اما چون parent یک stacking context (z-index:1) ایجاد کرده است، همهٔ عناصر داخلی parent در همان context بالاتر یا پایین‌تر نسبت به banner مقایسه می‌شوند؛ به‌عبارت دیگر child-overlay نمی‌تواند از parent خارج شود.

راه‌حل اصلاحی

/* حذف z-index از parent یا تنظیم آن به auto */.parent{ position: relative; z-index: auto; }

/* یا قرار دادن overlay خارج از parent */<div class="child-overlay">Overlay</div>
<div class="parent">...</div>

با برداشتن z-index از والد یا قرار دادن overlay در سطح بالاتری از DOM (مثلاً انتهای body) می‌توانید ترتیب دلخواه را به‌دست آورید. گاهی استفاده از position: fixed برای المان‌های UI مانند مودال منطقی‌تر است.

بهترین روش‌ها و نکات حرفه‌ای

از یک نظام z-index منطقی استفاده کنید (مثلاً متغیرهای CSS یا یک اسکیمای لایه‌بندی: base, dropdown, modal, overlay).
از ایجاد stacking context غیرضروری (مثل transform یا opacity) برای والدها پرهیز کنید مگر لازم باشد.
برای مودال‌ها و پنل‌های ثابت، آنها را مستقیماً زیر <body> قرار دهید تا از پیچیدگی stacking context والدین فرار کنند.
از متغیرهای CSS یا سیستم design-token برای نگهداری سطوح z-index استفاده کنید تا نگهداری آسان‌تر باشد.

مثال با CSS variables

:root{
  --z-base: 0;
  --z-dropdown: 1000;
  --z-modal: 2000;
}

.dropdown{ position: absolute; z-index: var(--z-dropdown); }
.modal{ position: fixed; z-index: var(--z-modal); }

استفاده از متغیرها به شما امکان می‌دهد تا به‌راحت ترتیب لایه‌ها را در سراسر پروژه یکپارچه و قابل تغییر نگه دارید.

موارد خاص: flex، grid و z-index

در کانتکست‌های flex و grid، آیتم‌ها همچنان می‌توانند z-index داشته باشند، اما اگر والد یا یک آیتم ایجادکنندهٔ stacking context باشد رفتار ممکن است تغییر کند. همچنین برخی مرورگرها قبل‌تر تفاوت‌هایی داشتند—امروزه استانداردها یکپارچه‌تر شده‌اند اما با مرور مرورگرها را تست کنید.

خلاصه و جمع‌بندی

z-index ابزار قدرتمندی برای کنترل ترتیب لایه‌هاست اما تنها مقدار عددی کافی نیست. درک کامل از stacking context، شرایط ایجاد آن و نحوهٔ تعامل با position، transform، opacity و دیگر خواص، کلید حل مشکلات رایج و طراحی لایه‌بندی قابل‌اعتماد است. استفاده از یک سیستم مرجع (مثل متغیرهای CSS) و قرار دادن المان‌های مهم UI در سطح مناسب DOM به شما کمک می‌کند رفتار قابل‌پیش‌بینی‌تری به‌دست آورید.

اگر مثال مشخصی از کدی دارید که z-index در آن عمل نمی‌کند، آن را ارسال کنید تا یک بررسی دقیق‌تر و اصلاح‌شده ارائه دهم.

آیا این مطلب برای شما مفید بود ؟

خیر

بله