Z-Index: کنترل ترتیب عناصر روی یکدیگر

Z-Index: رقابت لایه‌ها در CSS! 👑

سلام دوستان خوش‌سلیقه! قبلاً در مورد انواع `position` صحبت کردیم و دیدیم که چطور می‌تونیم عناصر رو از جریان عادی صفحه خارج کنیم و اون‌ها رو جابجا کنیم. اما وقتی چند تا عنصر روی هم قرار می‌گیرن، یه سوال پیش میاد: کدومشون باید جلوتر باشه؟ جواب این سوال در خصوصیت `z-index` نهفته است! بیاید ببینیم چطور می‌تونیم باهاش لایه‌بندی عناصر رو مدیریت کنیم. 😉

1. `z-index` چیست و چرا به آن نیاز داریم؟ 🤔

تصور کنین شما چندین برگه کاغذ رو روی هم گذاشتین. کاغذی که بالاتر قرار گرفته، روی کاغذهای پایین‌تر دیده می‌شه. در CSS هم دقیقا همین اتفاق میفته! محور Z (محور سوم) در فضای سه‌بعدی، عمق رو نشون می‌ده. یعنی از جلو به عقب صفحه.

خصوصیت `z-index به ما اجازه می‌ده که ترتیب نمایش (یعنی اولویت لایه‌بندی) عناصر رو در محور Z تعیین کنیم. عناصری که z-index بالاتری دارن، روی عناصری با z-index پایین‌تر نمایش داده می‌شن.

نکته مهم: z-index فقط روی عناصری کار می‌کنه که position اونها غیر از static باشه (یعنی relative, absolute, fixed یا sticky).

2. نحوه‌ی استفاده از `z-index` 🎨

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

• مقادیر مثبت: عنصر رو به سمت جلو (سمت بیننده) می‌بره. هر چقدر عدد بزرگتر، جلوتر.
• مقدار صفر (0): یه نقطه شروع خوبه.
• مقادیر منفی: عنصر رو به سمت عقب (پشت عناصر دیگه) می‌بره.

مثال عملی:

.container {
  position: relative; /* والد برای عناصر absolute */
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin: 50px; /* برای فاصله گذاری */
}

.box1 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.7); /* قرمز */
  z-index: 1; /* این جعبه کمی عقب‌تره */
}

.box2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 150px;
  height: 100px;
  background-color: rgba(0, 0, 255, 0.7); /* آبی */
  z-index: 5; /* این جعبه جلوتر از box1 هست */
}

.box3 {
  position: absolute;
  top: 80px;
  left: 80px;
  width: 150px;
  height: 100px;
  background-color: rgba(0, 255, 0, 0.7); /* سبز */
  z-index: -2; /* این جعبه کاملاً پشت هر دو تا قرار می‌گیره */
}

در مثال بالا، باکس آبی (z-index: 5) روی باکس قرمز (z-index: 1) قرار می‌گیره، و هر دو روی باکس سبز (z-index: -2) قرار می‌گیرن.

3. اهمیت کانتینرها و `z-index` 🏗️

یه نکته خیلی مهم در مورد z-index اینه که ترتیب لایه‌ها در یک “پشته” (Stacking Context) تعریف می‌شه.

چه چیزهایی یه پشته جدید ایجاد می‌کنن؟

• عنصر ریشه (html).
• هر عنصری که position غیر از static داره و z-index اون غیر از auto باشه.
• عناصر flex یا grid که z-index اونها غیر از auto باشه.
• عناصر opacity کمتر از 1 داشته باشن.

نکته کلیدی: z-index در سطوح مختلف (پشته‌های مختلف) مثل هم عمل نمی‌کنه. یه عنصر با z-index: 10 در یک پشته، ممکنه زیر یه عنصر با z-index: 1 در پشته‌ی بالاتر قرار بگیره.

.outer-container {
  position: relative; /* ایجاد یه پشته */
  z-index: 10; /* z-index بالا */
  width: 400px;
  height: 300px;
  background-color: lightblue;
  margin: 50px;
}

.inner-box {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: orange;
  z-index: 1; /* z-index پایین، اما چون در پشته outer-container هست، ممکنه بالاتر از یه عنصر خارج از اون قرار بگیره */
}

.another-outer {
  position: relative;
  z-index: 5; /* z-index کمتر از outer-container */
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  margin: -100px auto; /* برای تداخل */
}

وقتی با مسائل پیچیده لایه‌بندی مواجه شدین، همیشه به پشته‌های ایجاد شده توسط والدها و خصوصیت‌های دیگه (مثل opacity) توجه کنین.

4. کاربردهای رایج Z-Index 🚀

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

/* مثال برای Overlay */
.image-container {
  position: relative;
  display: inline-block; /* برای اینکه عرضش برابر تصویر باشه */
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* سیاه نیمه‌شفاف */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  z-index: 2; /* بالاتر از تصویر */
}

وقتی از z-index استفاده می‌کنین، بهتره از اعداد بزرگ و با فاصله استفاده کنین (مثلاً 10، 20، 30) تا بعداً اگه لازم شد، بینشون عنصر جدیدی اضافه کنین بدون اینکه نیاز به تغییر بقیه باشه.

z-index ابزاری قدرتمنده برای کنترل ظاهر و تجربه‌ی کاربری. با درک درست مفاهیم پشته (Stacking Context) و نحوه‌ی کارکردش، می‌تونین لایه‌بندی‌های خلاقانه و منظمی در وب‌سایتتون ایجاد کنین! ✨