ویژگی z-index چیست؟

گاهی اوقات مشاهده میکنید که یک قسمتی از صفحه وب بر روی دیگری ظاهر می شود و یا وقتی زیر منوی سایتتان را باز میکنید المنت پشت منو بر روی منو دیده می شود.

مثل این شکل :



اینجا منو روی باکس قرار دارد ممکن است با باز شدن زیر منو نمایش آن پشت باکس باشد

z-index که یکی از خاصیت های css هست ترتیب قرار گرفتن لایه های تقسیم بندی شده بر روی هم تعیین میکنه

اگر صفحه وب رو به صورت نمودار مختصات 3 بعدی x , y , z تصور کنیم z در واقع نزدیکی یا دوری لایه از دید ما را مشخص خواهد نمود



برای درک بهتر به این تصویر دقت کنید :



در صفحات HTML ترتیب طبیعی و پیش فرض قرارگیری عناصر بر روی هم بر اساس یک سری از عوامل است. لیستی که در زیر می بینید از پایین ترین سطح قرارگیری تا بالاترین مرتب شده، در این لیست عناصر به صورت پیش فرض و بدون استفاده از خاصیت z-index بر روی هم قرار می گیرند:

1. عناصر دارای background و border.

2. عناصر فاقد خاصیت position و float که به صورت display:block باشند.

3. عناصر فاقد خاصیت position ولی دارای خاصیت float.

4. عناصر دارای خاصیت inline.

5. عناصر دارای خاصیت position.

اگر به درستی از خاصیت z-index استفاده شود می توان این ترتیب پیش فرض را تغییر داد.

استفاده از خاصیت z-index گاهی سبب سردرگمی طراحان وب می شود چرا که این خاصیت تنها وقتی کار می کند که در عناصر خاصیت position استفاده شده باشد، به این ترتیب شما باید از یکی از این خاصیت ها همراه با خاصیت z-index استفاده کنید:

position: absolute;
position: relative;
position: fixed;

به عنوان مثال اگر ما بخواهیم عناصر به ترتیب شکل زیر بر روی هم قرار بگیرند:



از این خاصیت ها استفاده می کنیم:

#gray{ 
position: relative;
 z-index: 1;
 } 
#blue{ 
position: relative;
 z-index: 2;
 } 
#yellow{ 
position: relative;
 z-index: 3;
 }

از خاصیت z-index تمامی مرورگرها پشتیبانی می کنند.

اصول طراحی وب