Контекст наложения

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 осмысленно, например, используйте положительные значения для верхних элементов и отрицательные для нижних

1

Задача

Модуль 1: Web Core, 11 уровень, 1 лекция

Недоступна

Использование свойства z-index

Использование свойства z-index

Открыть

1

Задача

Модуль 1: Web Core, 11 уровень, 1 лекция

Недоступна

Создание контекста наложения

Создание контекста наложения

Открыть