سی‌اس‌اس/z-index

موقعیت‌دهی

z-index

ویژگی float

ویژگی z-index در CSS

ویژگی z-index در CSS برای تعیین ترتیب قرارگیری عناصر روی‌هم (لایه‌بندی عمودی) استفاده می‌شود. این ویژگی مشخص می‌کند که کدام عنصر جلوتر و کدام‌یک پشت‌تر نمایش داده شود.

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

دستور کلی

element {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

پیش‌نیاز استفاده از z-index

ویژگی z-index تنها زمانی تأثیر دارد که عنصر دارای مقدار position غیر از static باشد (یعنی یکی از: relative، absolute، fixed یا sticky).

اگر عنصر دارای position: static باشد، مقدار z-index نادیده گرفته می‌شود.

مقادیر z-index

z-index می‌تواند یک عدد صحیح مثبت، منفی یا صفر باشد.

عدد بزرگ‌تر: جلوتر نمایش داده می‌شود.
عدد کوچک‌تر: عقب‌تر قرار می‌گیرد.
مقدار پیش‌فرض: auto، یعنی ترتیب طبیعی (بر اساس ترتیب DOM).

مثال ساده: لایه‌بندی با z-index

<div class="box1">جعبه ۱</div>
<div class="box2">جعبه ۲</div>

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.box2 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

نتیجه: .box2 روی .box1 قرار می‌گیرد چون z-index بیشتری دارد.

مقادیر منفی z-index

ممکن است بخواهید یک عنصر را پشت همه قرار دهید.

.background {
  position: absolute;
  z-index: -1;
}

مفاهیم کلیدی: لایه‌بندی و «پشتهٔ تودرتو»

مرورگرها عناصر را به صورت «پشته» (stack) نمایش می‌دهند. اما این پشته‌ها می‌توانند تودرتو باشند. هر عنصر دارای موقعیت (position) و z-index می‌تواند یک پشتهٔ جدید بسازد.

نکته مهم: پدر اولویت دارد

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

رفتار auto در z-index

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

مثال ترکیبی: کارت‌های روی‌هم

.card1 {
  position: relative;
  z-index: 3;
}
.card2 {
  position: relative;
  z-index: 2;
}
.card3 {
  position: relative;
  z-index: 1;
}

کارت ۱ در بالا، کارت ۳ در پایین‌ترین لایه خواهد بود.

تمرین‌ها

تمرین ۱: طراحی دکمه شناور

یک دکمه با position: fixed طراحی کنید که همیشه بالای تمام محتوای صفحه نمایش داده شود.

تمرین ۲: کارت تبلیغاتی پاپ‌آپ

یک کارت طراحی کنید که به صورت absolute ظاهر شود و با z-index از سایر عناصر بالاتر باشد.

تمرین ۳: ترتیب‌بندی دستی عناصر

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

تمرین ۴: کار با مقادیر منفی

بک‌گراندی طراحی کنید که در پشت همهٔ عناصر قرار گیرد بدون اینکه باعث پوشاندن محتوا شود.

نکات نهایی

هر عنصر با position غیر static می‌تواند دارای z-index باشد.
z-index تنها در بین عناصر "خواهر" (sibling) و درون یک پشته عمل می‌کند.
برای حل مشکلاتی که عنصر مورد نظر دیده نمی‌شود، بررسی کنید که پدرش موقعیت داشته باشد یا نه.
استفاده بیش‌ازحد از z-index می‌تواند باعث سردرگمی در لایه‌بندی شود؛ مرتب‌سازی درست DOM و ساختار position اهمیت دارد.

جمع‌بندی

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

مطالعه بیشتر