در CSS، ویژگی z-index نقش مهمی در ترتیب لایه‌ها و قرارگیری عناصر دارد، به خصوص زمانی که با عناصر دارای موقعیت (positioned) سر و کار داریم. در اینجا قصد دارم با زبانی ساده و خودمانی در مورد استفاده و ویژگی‌های z-index صحبت کنم تا بتونید در پروژه‌های واقعی ازش به درستی استفاده کنید.
فرض کنید چند عنصر در صفحه وب داریم که روی هم قرار گرفته‌اند، مثل زمانی که در حال طراحی یک منوی آبشاری هستید. در چنین مواردی، z-index کمک می‌کند تعیین کنید که کدام عنصر باید بالاترین سطح قابل مشاهده را داشته باشد. این ویژگی مخصوصا در طرح‌بندی‌های پیچیده و دارای انیمیشن بسیار مفید است.
کمی عمیق‌تر بریم. هر گاه یک عنصر دارای یک ویژگی position مانند relative یا absolute داشته باشد، می‌تواند از z-index استفاده کند. اما باید بدانید که z-index تنها برای عناصری با position مشخص کار می‌کند و اگر نکرد، ممکن است به خاطر مشکلاتی مانند "زمینهٔ انباشته" (stacking context) باشد.
زمینه انباشته، مفهومیه که زمانی شکل می‌گیره که یک عنصر والد دارای یک z-index مشخص بشه. در این حالت، همهٔ عناصر فرزند اون عنصر والد وابسته به کلیت همون زمینه انباشته هستند و نمی‌تونن از حدود اون تجاوز کنن مگر اینکه خودشون یک زمینه انباشته جدید به‌وجود بیارن.
برای آشنایی عملی با این مفهوم، بیایید یک مثال ببینیم که چطور z-index و زمینه‌های انباشته با هم عمل می‌کنند.
<style>
.container {
position: relative;
z-index: 1;
}
.element1 {
position: absolute;
z-index: 3;
}
.element2 {
position: absolute;
z-index: 2;
}
</style>
<div class="container">
<div class="element1">Element 1</div>
<div class="element2">Element 2</div>
</div>
<style>: شروع تعریف استایل‌ها
.container: داشتن موقعیت relative و z-index: 1 برای ایجاد یک زمینه انباشته
.element1: دارای position: absolute و z-index: 3 که آن را روی element2 قرار می‌دهد
.element2: دارای position: absolute و z-index: 2 که آن را زیر element1 قرار می‌دهد