درک مفهوم زنده‌وگشت یا z-index در CSS

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

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

اما یادتون باشه که z-index فقط روی عناصر position شده کاربرد داره. یعنی عناصری که position شون به صورت relative، absolute یا fixed تعریف شده. برای اینکه بتونیم از z-index استفاده کنیم، باید حتماً مقدار position رو برای عنصر تعریف کرده باشیم.

یه نکته کوچک اما مهم دیگه اینه که مکان و نحوه تعریف z-index باید با دقت انجام بشه. اگر بخواهیم دو عنصری که در یک سطح نیستن (مثلاً یکی درون یک والد و دیگری در یک والد دیگه) رو با z-index مرتب کنیم، ممکنه به نتایج غیرمنتظره برخورد کنیم.

مثال کد z-index

<!-- HTML Structure -->
<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

<!-- CSS Code -->
.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.box1, .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: red;
  z-index: 1;
  top: 0;
  left: 0;
}
.box2 {
  background-color: blue;
  z-index: 2;
  top: 50px;
  left: 50px;
}

توضیح خط به خط کد