z-index Property
ویژگی z-index
در CSS ترتیب قرار گیری عناصر بر روی همدیگر را مشخص می کند. عنصری که مقدار بیشتری دارد همیشه در جلوی عناصری که مقدار کمتری دارند قرار می گیرد.
نحوه نوشتار
z-index: auto; z-index: 0; z-index: 5; z-index: -1;
مقادیر
auto
مقدار جدیدی را بوجود نمی آورد و جایگاه عنصر را برابر با جایگاه والد آن قرار می دهد.
اعداد
جایگاه عنصر را نسبت به دیگر عناصر مشخص می کند. هرچه عدد بزرگتر باشد، جلوتر از سایر عناصر قرار می گیرند. اعداد منفی نیز قابل استفاده هستند.
نکته: ویژگی z-index
تنها در عناصری عمل می کند که به آنها ویژگی position
داده شده باشد:
( position: absolute , relavite, fixed, sticky
)
ویژگی z-index
در واقع جایگاه عناصر را در محور سوم (z
) نسبت به ناظر یا بیننده مشخص می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
در این مثال میبینیم که باکس آبی که کمترین مقدار را در z-index
به خود اختصاص داده است و زیر باکس قرمز قرار دارد. همچنین مقدار z-index
در باکس قرمز کمتر از باکس سبز می باشد پس بنابراین، باکس سبز بر روی باکس قرمز قرار گرفته است.
html
<section> <div class="blue">z-index: 1</div> <div class="red">z-index: 2</div> <div class="green">z-index: 3</div> </section>
css
* { box-sizing: border-box; } section { position: relative; height: 130px; width: 100%; } section div { display: grid; place-content: center; } .blue { position: absolute; width: 40%; height: 130px; background-color: skyblue; border: 7px solid blue; z-index: 1; } .red { position: absolute; width: 50%; height: 130px; background-color: rgba(241, 80, 59, 0.9); left: 25%; border: 7px solid red; z-index: 2; } .green { position: absolute; width: 40%; height: 130px; background-color: rgba(30, 255, 0, 0.7); left: 60%; border: 7px solid green; z-index: 3; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.