آشنایی با ویژگی قدرتمند z-index در CSS

مقدمه

در این مقاله با یکی از مهم‌ترین ویژگی‌های CSS یعنی z-index آشنا می‌شویم؛ قابلیتی که به عناصر صفحه اجازه می‌دهد وارد بعد سوم شوند!

معمولاً هنگام طراحی صفحات وب، عناصر در یک فضای دوبعدی (محورهای افقی و عمودی) قرار می‌گیرند. مرورگر عناصر HTML را مانند بلوک‌هایی روی صفحه می‌چیند؛ اما z-index این محدودیت را از بین می‌برد و به شما امکان می‌دهد ترتیب نمایش عناصر را در محور سوم یا همان محور Z کنترل کنید.

به بیان ساده، هرچه مقدار z-index یک عنصر بیشتر باشد، آن عنصر در لایه بالاتری قرار گرفته و روی عناصر دیگر نمایش داده می‌شود.

z-index چگونه کار می‌کند؟

فرض کنید دو عنصر داریم:

#navbar {
  position: relative;
  z-index: 11;
}

#footer {
  position: relative;
  z-index: 10;
}

در این مثال اگر موقعیت این دو عنصر روی هم قرار بگیرد، عنصر navbar روی footer نمایش داده می‌شود؛ زیرا مقدار z-index آن بیشتر است.

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

کاربردهای z-index

گاهی اوقات لازم است یک عنصر روی عنصر دیگری قرار بگیرد. برای مثال:

• نمایش منوهای کشویی
• پنجره‌های مودال (Modal)
• تولتیپ‌ها (Tooltip)
• بنرها و اعلان‌ها
• قرار دادن متن روی تصویر

مثال:

<div>
  <img src="image.jpg">
</div>

<div id="magazine-title">
  Sammy the Shark
</div>

#portrait {
  position: relative;
  z-index: 1;
  width: 200px;
}

#magazine-title {
  position: relative;
  z-index: 2;
  top: -2em;
  left: 2em;
}

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

یک نکته مهم

شاید متوجه شده باشید که در تمام مثال‌ها همراه با z-index از ویژگی position نیز استفاده شده است.

این موضوع اتفاقی نیست!

ویژگی z-index تنها روی عناصر Positioned کار می‌کند.

یعنی عنصر باید یکی از مقادیر زیر را داشته باشد:

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

اگر عنصر مقدار پیش‌فرض زیر را داشته باشد:

position: static;

مرورگر مقدار z-index را نادیده می‌گیرد.

عناصر Positioned چیستند؟

به هر عنصری که مقدار position آن چیزی غیر از static باشد، عنصر Positioned گفته می‌شود.

مثال:

div {
  position: relative;
  z-index: 1;
}

در این حالت z-index به درستی عمل خواهد کرد.

رقابت z-index فقط بین عناصر هم‌سطح انجام می‌شود

یکی از نکات مهمی که بسیاری از توسعه‌دهندگان در ابتدا متوجه آن نمی‌شوند این است که z-index فقط بین عناصر هم‌سطح (Sibling) مقایسه می‌شود.

به مثال زیر توجه کنید:

<div class="blue">
  <div class="violet"></div>
  <div class="purple"></div>
</div>

<div class="green"></div>

.blue {
  position: relative;
  z-index: 2;
}

.violet {
  position: relative;
  z-index: 4;
}

.purple {
  position: relative;
  z-index: 1;
}

.green {
  position: relative;
  z-index: 3;
}

ممکن است انتظار داشته باشید عنصر violet روی همه عناصر قرار بگیرد زیرا مقدار z-index آن برابر 4 است.

اما در عمل عنصر green روی آن نمایش داده می‌شود.

دلیل این اتفاق این است که violet داخل عنصر blue قرار دارد و مرورگر ابتدا لایه‌بندی والدها را بررسی می‌کند، سپس فرزندان را.

بنابراین z-index فقط در محدوده عناصر هم‌سطح با یکدیگر رقابت می‌کند.

حداکثر مقدار z-index

مقدار z-index باید یک عدد صحیح (Integer) باشد:

z-index: 1;
z-index: 100;
z-index: -1;

بازه مجاز معمولاً برابر است با:

-2147483647 تا +2147483647

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

استفاده بیش از حد از اعداد بزرگ

در بسیاری از پروژه‌ها ممکن است مقادیر زیر را مشاهده کنید:

z-index: 999;
z-index: 9999;
z-index: 99999;

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

اما استفاده مداوم از چنین اعدادی می‌تواند در آینده مشکلاتی ایجاد کند؛ زیرا مدیریت لایه‌ها دشوار خواهد شد.

در اکثر مواقع مقادیر کوچکی مانند موارد زیر کافی هستند:

z-index: 1;
z-index: 2;
z-index: 3;

بهترین روش استفاده از z-index

بهتر است برای پروژه خود یک سیستم لایه‌بندی مشخص تعریف کنید:

.header {
  z-index: 10;
}

.dropdown {
  z-index: 20;
}

.modal {
  z-index: 30;
}

.toast {
  z-index: 40;
}

این کار باعث می‌شود مدیریت لایه‌ها بسیار ساده‌تر شود.

جمع‌بندی

ویژگی z-index یکی از مهم‌ترین ابزارهای CSS برای کنترل ترتیب نمایش عناصر در محور Z است.

نکات مهمی که باید به خاطر بسپارید:

• z-index امکان ایجاد لایه‌های مختلف روی صفحه را فراهم می‌کند.
• فقط روی عناصر Positioned کار می‌کند.
• رقابت z-index تنها بین عناصر هم‌سطح انجام می‌شود.
• استفاده از اعداد بسیار بزرگ معمولاً توصیه نمی‌شود.
• این ویژگی برای ساخت منوها، مودال‌ها، تولتیپ‌ها و طراحی‌های لایه‌ای بسیار کاربردی است.

اگر مفهوم z-index را به‌خوبی درک کنید، کنترل بسیار بیشتری روی چیدمان و طراحی رابط کاربری خواهید داشت.

از همراهی شما با پارمین کلود سپاسگزاریم.