آموزش لایه ها در CSS و نکات کاربردی

در CSS وقتی چند عنصر روی هم قرار می‌گیرند، می‌توان با ویژگی z-index مشخص کرد کدام عنصر جلوتر و کدام عقب‌تر نمایش داده شود.

مفهوم ساده

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

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

.box2 {
  position: absolute;
  z-index: 2;
}

در این مثال، .box2 روی .box1 نمایش داده می‌شود.

نکته مهم درباره position

برای اینکه z-index در بسیاری از حالت‌ها درست کار کند، عنصر باید موقعیت مشخصی داشته باشد؛ مثلاً:

position: relative;

یا:

position: absolute;

مثال کامل:

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

.text {
  position: absolute;
  z-index: 2;
}

این روش برای قرار دادن متن روی تصویر بسیار کاربردی است.

قرار دادن عنصر در پشت

می‌توان مقدار منفی هم داد:

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

اما مقدار منفی گاهی باعث می‌شود عنصر پشت عناصر والد پنهان شود؛ بنابراین باید با دقت استفاده شود.

کاربردهای رایج لایه‌بندی

• متن روی تصویر
• منوی بازشونده
• پنجره‌های Popup
• منوی ثابت بالای صفحه
• Modal یا پنجره بازشو
• قرار دادن آیکون روی عکس
• ساخت Overlay یا لایه نیمه‌شفاف

مثلاً برای یک پنجره بازشو:

.modal {
  position: fixed;
  z-index: 1000;
}

تفاوت z-index و position

position محل قرارگیری عنصر را مشخص می‌کند، اما z-index مشخص می‌کند عنصر در جلو یا عقب کدام عنصر قرار گیرد.

یک نکته مهم‌تر: Stacking Context

گاهی حتی اگر z-index: 9999 بدهید، عنصر باز هم جلو نمی‌آید. علت معمولاً وجود یک محیط لایه‌بندی مستقل (Stacking Context) در عنصر والد است.

ویژگی‌هایی مثل transform، opacity و بعضی حالت‌های position می‌توانند چنین محیطی ایجاد کنند.

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

خلاصه: برای مدیریت لایه‌های ظاهری در CSS معمولاً از ترکیب position + z-index استفاده می‌شود. مقدار z-index بالاتر یعنی نمایش جلوتر، البته در محدوده همان ساختار لایه‌بندی.