خاصیت z-index

سلام دوستان با مقاله ای دیگر خدمت شما هستم..

z-index یک خاصیت هست که در CSS به کار ما میاد.
چند نفر ازم در مورد z-index می پرسیدن که اینم مقاله اش:

خاصیت z-index ترتیب قرارگیری عناصر HTML بر روی هم را تعیین می کند. “stack level” یا ترتیب قرارگیری عناصر بر روی هم اشاره به موقعیت عنصر بر روی محور Z دارد(همانطور که در CSS محور X یا محور Y داریم). هرچه مقدار z-index یک عنصر بیشتر باشد به معنی رو بودن عنصر نسبت به بقیه عناصر است. این روی هم قرارگیری عناصر به صورت عمود بر روی صفحه است.
برای درک بهتر خاصیت z-index به این تصویر توجه کنید:

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

۱٫ عناصر دارای background و border.
۲٫ عناصر فاقد خاصیت position و float که به صورت displaylock باشند.
۳٫ عناصر فاقد خاصیت position ولی دارای خاصیت float.
۴٫ عناصر دارای خاصیت inline.
۵٫ عناصر دارای خاصیت position.
اگر به درستی از خاصیت z-index استفاده شود می توان این ترتیب پیش فرض را تغییر داد.

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

کد HTML:

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

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

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

کد HTML:

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

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