مدل‌سازی عناصر روی همدیگر یکی از جذاب‌ترین بخش‌های CSS است. با استفاده از ویژگی‌های position و z-index می‌توانیم کنترل کامل روی جای‌گیری و اولویت نمایش عناصر داشته باشیم. در این درس دیدیم چطور یک کپشن نیمه‌شفاف روی تصویر قرار می‌گیرد.

---

🧱 مراحل کلیدی

1. ساختار HTML

یک والد با کلاس image-banner داریم که شامل تصویر و توضیح است:

<div class="image-banner">
  <img src="my-photo.jpg" alt="نمونه عکس">
  <div class="banner-description">
    <p>این یک متن نمونه برای نمایش کپشن روی تصویر است.</p>
  </div>
</div>

2. واکنش‌گرایی تصویر

img {
  max-width: 100%;
  height: auto;
  display: block; /* رفع مشکل هم‌ترازی */
}

3. موقعیت‌دهی با Position

• والد: position: relative
• فرزند: position: absolute

.image-banner {
  position: relative;
}

.banner-description {
  position: absolute;
  bottom: 0;
  left: 0;
}

4. پس‌زمینه نیمه‌شفاف

.banner-description {
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 15px 25px;
}

5. جابه‌جایی نسبی

اگر بخواهیم کل جعبه کمی جابه‌جا شود ولی فضای خودش را حفظ کند:

.image-banner {
  position: relative;
  top: 10px;
  left: 10px;
}

6. اولویت نمایش با z-index

.image-banner {
  z-index: 10;
}

.sidebar {
  z-index: 5;
}

هرچه عدد بزرگ‌تر باشد، عنصر بالاتر دیده می‌شود.

---

📚 مرور کلی

• absolute: عنصر را نسبت به والد دارای relative در جای دلخواه قرار می‌دهد.
• relative: عنصر در جریان صفحه باقی می‌ماند اما می‌تواند کمی جابه‌جا شود.
• rgba: امکان ساخت رنگ‌های نیمه‌شفاف.
• z-index: تعیین ترتیب لایه‌ها.