توضیحات کلی درباره z-index
در CSS، خصوصیت z-index به ما این امکان رو میده که ترتیب قرارگیری عناصر شناور بر روی همدیگه رو مشخص کنیم. شاید براتون جالب باشه بدونید که این قابلیت چقدر می‌تونه در طراحی صفحات وب، خصوصاً زمانی که با لایه‌های متعددی کار می‌کنیم، کاربردی باشه.
به طور کلی، زمانی که عناصر مختلفی رو در صفحه قرار میدیم، هر کدام از این عناصر یک مقدار z-index دارن که تعیین می‌کنه اون عنصر نسبت به دیگران کجا قرار بگیره. اعدادی که برای z-index تعیین می‌کنیم، همیشه باید عدد صحیح باشه و معمولاً اعداد بزرگتر به معنی درجای بالاتر خواهد بود.
استفاده از z-index یک شرط مهم داره و اون اینه که این خصوصیت تنها در صورتی عمل می‌کنه که عنصر مربوطه دارای موقعیت‌بندی (Positioning) باشه؛ یعنی یکی از مقادیر absolute، relative یا fixed یا sticky بهش داده شده باشه.
در طراحی پروژه واقعی، تعیین درست z-index می‌تونه به شما کمک کنه تا لایه‌بندی عناصر مثل منوها، پاپ‌آپ‌ها یا هر المان شناور دیگه‌ای رو به درستی در جایگاه مناسبشون قرار بدید.
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
background-color: red;
width: 100px;
height: 100px;
}
.box2 {
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
background-color: blue;
width: 100px;
height: 100px;
}
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
توضیح خط به خط کد بالا
.box1: این کلاس مشخصات جعبه اول رو داره.position: absolute;: موقعیت‌دهی مطلق برای جعبه اول تعریف شده که اینکار z-index رو فعال می‌کنه.top: 50px; و left: 50px;: موقعیت جعبه از بالا و چپ تنظیم شده.z-index: 1;: مقدار z-index برای این جعبه که نسبت به جعبه‌های دیگه اولویت پایین‌تری داره.background-color: red;: رنگ پس‌زمینه جعبه اول قرمز است..box2: این کلاس مشخصات جعبه دوم رو داره.z-index: 2;: مقدار z-index برای این جعبه بیشتر از جعبه اول هست پس این جعبه بالای جعبه اول قرار میگیره.background-color: blue;: رنگ پس‌زمینه جعبه آبی است.