مثال (خصوصیت z-index)

در مثال زیر، خصوصیت z-index برای تصویر تنظیم شده است:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
خودتان امتحان کنید »

تعریف و کاربرد

خصوصیت z-index ترتیب عناصر را مشخص می کند (کدام عنصر باید جلو یا پشت دیگر عناصر باشد)

یک عنصر با z-index بزرگتر همیشه جلوتر از عنصری با z-index کوچکتر قرار می گیرد. 

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

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.zIndex="1"

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدارتوضیحاتنمایش دادن
auto ترتیب عنصر معادل ترتیب والدش قرار می گیرد. این مقدار پیش فرض است. نمایش دادن »
number ترتیب عنصر معادل عدد مشخص شده، تنظیم می شود. مقادیر منفی نیز قابل قبول است. نمایش دادن »
inherit  تعیین می کند که باید از والدش، ارث بری داشته باشد.  

بیاموزهای مرتبط

CSS Position (بیاموز CSS)

position (مرجع خصوصیت های CSS)