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

۱. مفهوم محور Z و Stack Context:

  • محور Z: تصور کنید صفحه وب شما یک صفحه کاغذ است. محور X جهت افقی (چپ به راست) و محور Y جهت عمودی (بالا به پایین) را نشان می‌دهد. محور Z، محور عمود بر این صفحه است که به سمت بیرون (به سمت کاربر) یا داخل (به سمت صفحه) امتداد دارد.
  • Stacking Context (محیط پشته): عناصر با position غیر از static (یعنی relative, absolute, fixed, sticky) یک “محیط پشته” ایجاد می‌کنند. این محیط‌ها به سازماندهی لایه‌بندی عناصر کمک می‌کنند.

۲. نحوه عملکرد Z-index:

  • فقط برای عناصر با position غیر static: مهمترین نکته این است که z-index تنها بر روی عناصری که position آن‌ها relative, absolute, fixed, یا sticky است، تأثیر می‌گذارد. عناصر با position: static از z-index پیروی نمی‌کنند.
  • مقادیر عددی: z-index یک مقدار عددی می‌گیرد (مثلاً 1, 10, -5). هرچه این عدد بزرگتر باشد، المان در لایه‌های بالاتر (یعنی نزدیک‌تر به کاربر و روی سایر عناصر) قرار می‌گیرد.
  • ترتیب پیش‌فرض: در حالت عادی، عناصری که دیرتر در کد HTML آمده‌اند، روی عناصری که زودتر آمده‌اند قرار می‌گیرند، مشروط بر اینکه در یک “محیط پشته” باشند.
  • مقایسه مقادیر:
  • عنصر با z-index: 2 همیشه روی عنصر با z-index: 1 قرار می‌گیرد.
  • عنصر با z-index: 1 روی عنصر با z-index: 0 قرار می‌گیرد.
  • عنصر با z-index: -1 زیر عناصر با z-index مثبت یا صفر قرار می‌گیرد.

۳. اهمیت Stack Context ها:

  • قانون سلسله مراتبی: z-index مقادیر را فقط در داخل همان محیط پشته مقایسه می‌کند. اگر دو عنصر فرزند در دو محیط پشته متفاوت باشند (که هر کدام توسط یک والد با position غیر static ایجاد شده‌اند)، مقایسه z-index آن‌ها به صورت مستقیم انجام نمی‌شود. بلکه، مقایسه اولیه بین خودِ محیط‌های پشته (والدین) صورت می‌گیرد.
  • مثال: فرض کنید یک والد A با z-index: 5 دارید و والد B با z-index: 10. اگرچه والد B z-index کمتری دارد، اما چون بالاترین لایه در محیط خود است، کل محتویات آن (شامل فرزندانش) روی محتویات والد A قرار خواهند گرفت، حتی اگر یکی از فرزندان والد B دارای z-index: 1 باشد و فرزند والد A دارای z-index: 100.

۴. مواردی که z-index را تحت تأثیر قرار می‌دهند:

عوامل دیگری نیز می‌توانند باعث ایجاد یک Stack Context جدید شوند و رفتار z-index را تغییر دهند:

  • عناصر با position غیر static و z-index تعریف شده.
  • عناصر با opacity کمتر از 1.
  • عناصر با transform, filter, perspective, clip-path, mask تعریف شده.
  • عناصر <iframe> و گره‌های کامپوزیت.

کاربردها:

  • نمایش منوهای بازشو (Dropdown Menus) و مودال‌ها (Modals): اطمینان از اینکه این عناصر همیشه بالای محتوای اصلی صفحه نمایش داده می‌شوند.
  • ایجاد افکت‌های بصری: قرار دادن تصاویر یا عناصر گرافیکی روی یکدیگر برای ساخت ترکیب‌بندی‌های خاص.
  • پوشاندن عناصر: استفاده از یک لایه با position: absolute و z-index بالا برای پوشاندن موقت بخش‌هایی از صفحه (مثلاً هنگام بارگذاری).

درک صحیح z-index و مفهوم Stack Context ها برای مدیریت چیدمان‌های پیچیده و جلوگیری از مشکلات همپوشانی عناصر ضروری است.

کلیدواژه ها : Z-index CSS-لایه‌بندی CSS-موقعیت‌دهی CSS-Stacking Context-محور Z-position-relative-absolute-fixed-sticky-