آموزش نحوه اولویت بندی عناصر در CSS

مقدمه

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

توضیح مفهومی اولویت‌بندی عناصر

هر عنصر در CSS یک سطح نمایش یا stacking context دارد. با z-index می‌توان تعیین کرد که عنصر نسبت به دیگر عناصر جلو یا عقب قرار گیرد. توجه داشته باشید که z-index فقط برای عناصر با موقعیت‌دهی position: relative | absolute | fixed | sticky اعمال می‌شود.

z-index عددی است که اولویت قرارگیری عنصر را مشخص می‌کند
مقدار بالاتر، عنصر را جلوتر نمایش می‌دهد
عناصر بدون position یا z-index خاص در سلسله‌مراتب طبیعی صفحه قرار می‌گیرند
stacking context می‌تواند بر روی والدین هم اعمال شود

مثال عملی با کد

چیدمان عناصر با z-index:

.box1 {
  position: relative;
  z-index: 1;
  background-color: red;
  width: 100px;
  height: 100px;
}

.box2 {
  position: relative;
  z-index: 2;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin-top: -50px;
}

ایجاد stacking context جدید:

.parent {
  position: relative;
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 5;
}

نکات مهم و توضیحات تکمیلی

z-index تنها برای عناصر با موقعیت‌دهی مناسب کاربرد دارد.
stacking context والد بر روی ترتیب عناصر داخلی تاثیر می‌گذارد.
در طراحی Responsive، کنترل لایه‌ها برای نمایش صحیح عناصر ضروری است.
ترکیب z-index با opacity و transform می‌تواند تاثیر stacking context را تغییر دهد.