ترکیب با z-index

ترکیب z-index با position در CSS

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

نکته کلیدی: z-index فقط روی عناصری کار می‌کند که position آن‌ها به غیر از static (پیش‌فرض) تنظیم شده باشد.

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

مقدار z-index یک عدد صحیح است (مثبت، منفی یا صفر) که ترتیب چیدمان عناصر را در محور Z (عمق صفحه) مشخص می‌کند:

• مقادیر بالاتر = عنصر جلوتر
• مقادیر پایین‌تر = عنصر عقب‌تر
• مقادیر مساوی = ترتیب نمایش بر اساس موقعیت در HTML

مثال کاربردی از z-index

فرض کنید می‌خواهید یک منوی کشویی ایجاد کنید که روی سایر عناصر صفحه نمایش داده شود:

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

.dropdown-content {
    position: absolute;
    z-index: 100;
    display: none;
}

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

نکات پیشرفته در کار با z-index

1. محدوده z-index: محدوده عددی ندارد اما مرورگرها معمولاً تا 2²⁴ پشتیبانی می‌کنند
2. زمینه چینش (Stacking Context): هر عنصری که z-index داشته باشد، یک زمینه چینش جدید ایجاد می‌کند
3. ترتیب نمایش: عناصر با z-index بالاتر فقط در زمینه چینش خودشان بالاتر نمایش داده می‌شوند

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