تو دنیای وب و طراحی صفحات، موقعی که با استایل‌های CSS کار می‌کنیم، یه موضوع خیلی مهمی هست به اسم z-index. این خاصیت به ما کمک می‌کنه که بتونیم لایه‌بندی المان‌ها رو روی همدیگه کنترل کنیم. چیزی که باید بدونیم اینه که z-index فقط روی المان‌هایی کار می‌کنه که دارای Positioned باشند. یعنی استایلشون position به جز static باشه مثل absolute، relative یا fixed.
وقتی که می‌خوایم چندتا المان رو روی صفحه قرار بدیم، عبادات z-index کمک می‌کنه بتونیم مشخص کنیم که کدوم المان‌ها روی بقیه نشون داده بشن و کدوم‌ها پشت بقیه قایم بشن. این ویژگی به ویژه توی ساختارهایی که نیاز به نمایش تیکت‌ها، پنجره‌ها یا هرچیزی که روی دایره‌المعارف گرافیک بهم مرتبط میشه، خیلی کاربردیه. استایل دهی درست به المان‌ها، ما رو به یک stacking context درست می‌رسونه که اهمیت زیادی تو طراحی‌ها داره.
حالا شاید بپرسید stacking context چیه؟ این یه فضاییه که کلید زدن بالاترین ترتیب لایه‌بندی در یک گروه از المان‌ها رو کنترل می‌کنه. هر المانی که دارای ویژگی position غیر از static باشه و z-index مشخص شده باشه، یه context جدید می‌سازه که توش المان‌های خودش رو بر اساس z-index مرتب می‌کنه.
به عنوان مثال، فرض کنین که ما می‌خوایم یه کادر عکس رو که می‌خواد روی متنی بیاد رو طراحی کنیم. لازمه‌اش اینه که از z-index درست استفاده کنیم که کاربر به درستی محتوا رو ببینه و خطا‌های بصری پیش نیاد. حالا زیر یه نمونه کد استایل برای فهم راحت‌تر اوردم:
<style>
.background {
position: absolute;
z-index: 1;
}
.foreground {
position: absolute;
z-index: 2;
}
</style>
<div class="background">متن پیش‌زمینه</div>
<div class="foreground">متن پس‌زمینه</div>
و حالا می‌رسیم به توضیحات مرحله‌ای:
اول، در <style> اولین قسمت از استایلتون می‌بینیم که المانی با کلاسی به اسم background تعریف شده که قابلیت position: absolute و z-index برابر یک داره. این یعنی المان مورد نظر در موقعیت خاصی نسبت به دیگر عناصر قرار می‌گیره و در سطح اول توی stacking context بتن می‌شینه.
دوم، دومین بخش کد، المانی با کلاس foreground جذابیت فضای بیشتری داره به خاطر z-index برابر دوش. این یعنی اون المان در سطح بالاتری از background نمایش داده میشه، به خدمت استایلی درست و مناسب.