ویژگی z-index در CSS

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;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.