Контекст накладання

2.1 Властивість z-index

Контекст накладання в CSS керується властивістю z-index і визначає, як елементи накладаються один на одного по осі Z (третій координаті, перпендикулярній до екрану). Розуміння і правильне використання z-index і контексту накладання дозволяє створювати складні та динамічні макети з перекриваючими елементами.

Основи контексту накладання

Контекст накладання визначає, як елементи будуть відображатися один над одним. Кожен елемент на веб-сторінці має рівень накладання, який може бути змінений за допомогою властивості z-index.

Правила накладання

1. Положення в дереві документа: елементи, які знаходяться нижче в дереві документа, накладаються поверх елементів, які знаходяться вище.
2. Властивість z-index: елементи з більшим значенням z-index накладаються поверх елементів з меншим значенням z-index.

Основи z-index

Властивість z-index визначає порядок накладання елементів, коли вони перекривають один одного. Елементи з більшим значенням z-index відображаються поверх елементів з меншим значенням. z-index застосовується тільки до елементів з позиціонуванням (position: relative, absolute, fixed або sticky).

Синтаксис:

    
      .element {
        position: relative; /* або absolute, fixed, sticky */
        z-index: number;
      }
    
  

Де:

• number: ціле число, яке може бути додатним або від'ємним. Чим більше значення, тим вище елемент буде в порядку накладання

Приклад використання z-index:

У цьому прикладі Box 2 з z-index: 2; буде відображатися поверх Box 1 і Box 3, а Box 1 буде відображатися поверх Box 3.

    
      .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 Контекст накладання (stacking context)

Контекст накладання — це група елементів, які розглядаються як єдине ціле при визначенні порядку накладання. Контекст накладання створюється при виконанні певних умов, таких як застосування z-index з позиціонуванням або наявність інших CSS-властивостей.

Створення контексту накладання

Контекст накладання створюється в наступних випадках:

1. Елемент має позиціонування relative, absolute, fixed або sticky і значення z-index, відмінне від auto.
2. Елемент має властивість opacity зі значенням менше 1.
3. Елемент має властивість transform, filter, perspective, clip-path, mask або mask-image, відмінне від значення за замовчуванням.
4. Елемент має властивість contain зі значенням layout, paint, або strict.

Приклад створення контексту накладання:

    
      .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">
        Батьківський елемент
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Пояснення коду:

• .parent: елемент з position: relative; і z-index: 10;, який створює новий контекст накладання
• .child-blue: елемент з position: absolute; і z-index: 1;, який знаходиться в новому контексті накладання, створеному батьківським елементом
• .child-red: елемент з position: absolute; і z-index: 2;, який також знаходиться в новому контексті накладання, створеному батьківським елементом, і буде розташовуватися поверх .child-blue

2.3 Взаємодія контекстів накладання

Елементи всередині одного контексту накладання не можуть бути накладені на елементи з іншого контексту накладання, якщо не змінюється порядок самих контекстів. Це означає, що елементи з вищим z-index всередині одного контексту накладання завжди будуть відображатись поверх елементів із нижчим z-index у тому ж контексті.

Приклад взаємодії контекстів накладання:

    
      .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>
    
  

У цьому прикладі контейнер .container2 із z-index: 20; буде відображатись поверх контейнера .container1 із z-index: 10;. Елементи всередині кожного контейнера будуть розподілені відповідно до їх z-index, але не перекриватимуться елементами з іншого контейнера.

2.4 Негативні значення z-index

z-index може приймати негативні значення, що дозволяє розташовувати елементи нижче інших елементів із нульовим або позитивним значенням z-index.

    
      .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>
    
  

Пояснення коду:

• .box1: Елемент із z-index: -1;, який буде розташований нижче елемента з z-index: 0;

Поради щодо використання z-index:

• Мінімізуйте використання z-index: намагайтеся використовувати z-index лише тоді, коли це дійсно необхідно. Це допоможе уникнути складних і заплутаних структур накладання
• Створюйте контексти накладання усвідомлено: створення нових контекстів накладання допомагає керувати накладанням елементів, але може ускладнити структуру документа
• Використовуйте семантично осмислені значення z-index: присвоюйте значення z-index осмислено, наприклад, використовуйте позитивні значення для верхніх елементів і негативні для нижніх