z-index Xususiyati

CSS Layout - z-index Xususiyati

z-index xususiyati elementning stek tartibini belgilaydi.

Elementlar joylashganda, ular boshqa elementlarni qoplashlari mumkin.

z-index xususiyati elementning stek tartibini belgilaydi (qaysi element boshqa elementlardan oldinda yoki ortida joylashishi kerak).

Element ijobiy yoki salbiy stek tartibiga ega bo'lishi mumkin:

Bu sarlavha Rasm z-index qiymati -1 bo'lgani uchun, u matnning ortida joylashadi.

Misol

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Eslatma

z-index faqat joylashgan elementlar (position: absolute, position: relative, position: fixed, yoki position: sticky) va flex elementlari (display: flex elementlarining to'g'ridan-to'g'ri farzandlari) uchun ishlaydi.

Boshqa z-index Misoli

Misol

Bu yerda yuqori stek tartibiga ega bo'lgan element har doim pastki stek tartibiga ega bo'lgan elementdan yuqorida joylashganini ko'ramiz:

<html>
  <head>
    <style>
      .container {
        position: relative;
      }
 
      .black-box {
        position: relative;
        z-index: 1;
        border: 2px solid black;
        height: 100px;
        margin: 30px;
      }
 
      .gray-box {
        position: absolute;
        z-index: 3;
        background: lightgray;
        height: 60px;
        width: 70%;
        left: 50px;
        top: 50px;
      }
 
      .green-box {
        position: absolute;
        z-index: 2;
        background: lightgreen;
        width: 35%;
        left: 270px;
        top: -15px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="black-box">Qora quti</div>
      <div class="gray-box">Kulrang quti</div>
      <div class="green-box">Yashil quti</div>
    </div>
  </body>
</html>

z-indexsiz

Agar ikkita joylashgan element bir-birini qoplashsa va z-index ko'rsatilmasa, HTML kodida oxirgi aniqlangan element ustida ko'rsatiladi.

Misol

Yuqaridagi misolning z-index ko'rsatilmagan holati:

<html>
  <head>
    <style>
      .container {
        position: relative;
      }
 
      .black-box {
        position: relative;
        border: 2px solid black;
        height: 100px;
        margin: 30px;
      }
 
      .gray-box {
        position: absolute;
        background: lightgray;
        height: 60px;
        width: 70%;
        left: 50px;
        top: 50px;
      }
 
      .green-box {
        position: absolute;
        background: lightgreen;
        width: 35%;
        left: 270px;
        top: -15px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="black-box">Qora quti</div>
      <div class="gray-box">Kulrang quti</div>
      <div class="green-box">Yashil quti</div>
    </div>
  </body>
</html>

CSS Xususiyatlari

Xususiyat	Ta'rif
z-index	Elementning stek tartibini belgilaydi

z-index Xususiyati

CSS Layout - z-index Xususiyati