Üst-üstə düşmə konteksti

2.1 z-index xüsusiyyəti

Üst-üstə düşmə konteksti CSS-də z-index xüsusiyyəti ilə idarə olunur və elementlərin Z oxu üzrə bir-birinin üzərinə necə düşdüyünü müəyyən edir (ekrana perpendikulyar olan üçüncü koordinat). z-index və üst-üstə düşmə kontekstindən düzgün istifadə etməyi başa düşmək kompleks və dinamik tərtibatların üst-üstə düşən elementlərlə yaradılmasını təmin edir.

Üst-üstə düşmə kontekstinin əsasları

Üst-üstə düşmə konteksti elementlərin bir-biri üzərində necə görsənəcəyini təyin edir. Veb səhifədəki hər bir elementin üst-üstə düşmə səviyyəsi var və bu, z-index xüsusiyyəti ilə dəyişdirilə bilər.

Üst-üstə düşmə qaydaları

1. Sənəd ağacında mövqe: sənəd ağacında aşağıda yerləşən elementlər, yuxarıda yerləşən elementlərin üzərindən görünür.
2. z-index xüsusiyyəti: daha böyük z-index dəyərinə malik elementlər, kiçik dəyərə malik elementlərin üzərindən görünür.

z-index-in əsasları

z-index xüsusiyyəti elementlər bir-birinin üzərinə düşdükdə onların görünüş sırasını müəyyən edir. Daha böyük z-index dəyəri olan elementlər kiçik dəyərə malik olanların üzərində göstərilir. z-index yalnız mövqeləndirilmiş (position: relative, absolute, fixed və ya sticky) elementlərə tətbiq olunur.

Sintaksis:

    
      .element {
        position: relative; /* və ya absolute, fixed, sticky */
        z-index: number;
      }
    
  

Burada:

• number: tam ədəd ola bilər, müsbət və ya mənfi. Dəyər nə qədər böyükdürsə, elementin üst-üstə düşmə sırasındakı səviyyəsi bir o qədər yüksək olacaq

z-index-dən istifadə nümunəsi:

Bu nümunədə z-index: 2; ilə Box 2, Box 1 və Box 3-ün üzərində göstəriləcək, Box 1 isə Box 3-ün üzərində görsənəcək.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Qatlama konteksti (stacking context)

Qatlama konteksti — elementlərin bir qrupudur, hansılar ki tək bir vahid kimi qəbul olunur sıralama müəyyənləşdiriləndə. Qatlama konteksti müəyyən şərtlər yerinə yetiriləndə yaradılır, məsələn, z-index vəzifələndirilməsi və ya digər CSS xassələrinin mövcudluğu.

Qatlama kontekstinin yaradılması

Qatlama konteksti aşağıdakı hallarda yaradılır:

1. Elementin vəzifələndirilməsi relative, absolute, fixed ya da sticky və z-index dəyəri auto-dan fərqlidir.
2. Elementin opacity xassəsinin dəyəri 1-dən kiçikdir.
3. Elementin transform, filter, perspective, clip-path, mask ya da mask-image xassəsi, default dəyərdən fərqlidir.
4. Elementin contain xassəsi layout, paint, ya da strict dəyərinə malikdir.

Qatlama kontekstinin yaradılması nümunəsi:

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Valideyn element
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Kodun izahı:

• .parent: position: relative; və z-index: 10; xassələrinə malik element, hansı ki yeni bir qatlama konteksti yaradır
• .child-blue: position: absolute; və z-index: 1; xassələrinə malik element, hansı ki valideyn element tərəfindən yaradılan yeni qatlama kontekstinə daxil olur
• .child-red: position: absolute; və z-index: 2; xassələrinə malik element, hansı ki valideyn element tərəfindən yaradılan yeni qatlama kontekstinə daxildir və .child-blue-un üstündə yerləşəcək

2.3 Örtmə kontekstlərinin qarşılıqlı əlaqəsi

Eyni örtmə kontekstindəki elementlər digər örtmə kontekstindəki elementlərin üzərinə yerləşdirilə bilməz, əgər kontekstlərin özlərinin sırası dəyişdirilməyibsə. Bu o deməkdir ki, eyni örtmə kontekstində daha yüksək z-index dəyərinə malik elementlər həmişə daha aşağı z-index dəyərinə malik elementlərin üzərində göstəriləcək.

Örtmə kontekstlərinin qarşılıqlı əlaqəsinə nümunə:

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

Bu nümunədə .container2 konteyneri z-index: 20; ilə, .container1 konteynerinin z-index: 10;-dan daha üstün göstəriləcək. Hər bir konteynerin daxilindəki elementlər öz z-index göstəricilərinə uyğun olaraq paylanacaq, lakin digər konteynerdəki elementlərin üzərinə yerləşdirilməyəcək.

2.4 Müsbət olmayan z-index dəyərləri

z-index mənfi dəyərlər ala bilər, bu, elementləri digər sıfır və ya müsbət dəyərli z-index-ə malik olan elementlərdən aşağıda yerləşdirməyə imkan verir.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Kodun izahı:

• .box1: z-index: -1; dəyəri ilə olan element, hansı ki, z-index: 0; olan elementdən daha aşağıda yerləşəcək

z-index istifadəsi üçün məsləhətlər:

• z-index istifadəsini minimuma endirin: z-index-dən yalnız həqiqətən lazım olduqda istifadə etməyə çalışın. Bu, overlay strukturlarının qarışıq və dolaşıq olmasının qarşısını alır.
• Overlay kontekstlərini şüurlu şəkildə yaradın: yeni overlay kontekstlərinin yaradılması elementlərin üstələnməsi ilə idarə etməyə kömək edir, lakin sənəd strukturunu çətinləşdirə bilər.
• Məntiqi olaraq mənalı z-index dəyərlərindən istifadə edin: z-index dəyərlərini məntiqi şəkildə təyin edin, məsələn, üst elementlər üçün müsbət dəyərlər və aşağı elementlər üçün mənfi dəyərlər istifadə edin.