Свойство z-index и порядок наложения элементов [Модуль 2: Блочная модель и позиционирование]: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия упражнений посвящена свойству CSS `z-index` и управлению порядком наложения элементов на веб-странице. Вы узнаете, как `z-index` работает в связке со свойством `position`, как создаются контексты наложения и как различные свойства CSS могут влиять на порядок отображения элементов. Задания построены от простого к сложному: начиная с базового применения `z-index` для двух элементов и заканчивая более сложными сценариями с вложенными контекстами наложения и влиянием других CSS-свойств, таких как `opacity` и `transform`. Вам предстоит дописывать недостающие фрагменты CSS-кода, чтобы добиться нужного визуального результата.

Список тем

Поднять элемент выше

id: 37320_zindex-1

Два квадрата частично перекрывают друг друга. Красный квадрат находится над синим по умолчанию из-за порядка в HTML. Ваша задача — изменить CSS таким образом, чтобы синий квадрат оказался поверх красного.

CSS

.container {
  position: relative;
  height: 150px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
  /* Красный квадрат остается с z-index: auto (0) */
}

.blue {
  background-color: blue;
  top: 50px;
  left: 50px;
  input1: input2;
  /* Добавьте z-index, чтобы поднять синий квадрат */
}

                     .container {
  position: relative;
  height: 150px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
  /* Красный квадрат остается с z-index: auto (0) */
}

.blue {
  background-color: blue;
  top: 50px;
  left: 50px;
  input1: input2;
  /* Добавьте z-index, чтобы поднять синий квадрат */
}

HTML

<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

Чтобы изменить порядок наложения элементов, используйте свойство `z-index`. Помните, что `z-index` работает только для позиционированных элементов (элементов со значением `position` отличным от `static`). Вам нужно добавить свойство `position` со значением `relative` (или `absolute`) и свойство `z-index` с положительным значением для синего квадрата.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Z-index работает только с позиционированием

id: 37320_zindex-2

Красный квадрат находится над синим. Мы пытаемся поднять синий квадрат с помощью `z-index: 1`, но это не работает. Сделайте так, чтобы свойство `z-index` для синего квадрата сработало, и он оказался поверх красного.

CSS

.container {
  position: relative;
  height: 150px;
}

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 0;
}

.blue {
  background-color: blue;
  /* Добавьте position, чтобы z-index сработал */
  input1: input2;
  top: 50px;
  left: 50px;
  z-index: 1;
}

                     .container {
  position: relative;
  height: 150px;
}

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 0;
}

.blue {
  background-color: blue;
  /* Добавьте position, чтобы z-index сработал */
  input1: input2;
  top: 50px;
  left: 50px;
  z-index: 1;
}

HTML

<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

Свойство `z-index` влияет только на элементы, у которых значение свойства `position` установлено в `relative`, `absolute`, `fixed` или `sticky`. Добавьте необходимое свойство `position` для синего квадрата.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Отрицательный z-index

id: 37320_zindex-3

Используйте отрицательное значение `z-index`, чтобы поместить красный квадрат позади родительского контейнера (у которого серый фон).

CSS

.container {
  position: relative; /* Создает контекст наложения */
  height: 150px;
  width: 150px;
  background-color: lightgray;
  margin-top: 30px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: -10px;
  left: 25px;
  /* Добавьте отрицательный z-index */
  input1: input2;
}

                     .container {
  position: relative; /* Создает контекст наложения */
  height: 150px;
  width: 150px;
  background-color: lightgray;
  margin-top: 30px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: -10px;
  left: 25px;
  /* Добавьте отрицательный z-index */
  input1: input2;
}

HTML

<div class="container">
  <div class="box red"></div>
</div>

Отрицательные значения `z-index` помещают элемент ниже в стопке наложения, чем элементы без `z-index` или с `z-index: 0` (или `auto`) в том же контексте наложения. Примените `z-index` с отрицательным значением к красному квадрату.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Порядок наложения без z-index

id: 37320_zindex-4

Три квадрата расположены в HTML в порядке: красный, синий, зеленый. Сейчас они не позиционированы и отображаются в потоке. Добавьте им абсолютное позиционирование, но не добавляйте `z-index`. Обратите внимание, как они накладываются друг на друга.

CSS

.container {
  position: relative;
  height: 180px;
}

.box {
  width: 100px;
  height: 100px;
  /* Добавьте позиционирование */
  input1: input2;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
}

.blue {
  background-color: blue;
  top: 40px;
  left: 40px;
}

.green {
  background-color: green;
  top: 60px;
  left: 60px;
}

                     .container {
  position: relative;
  height: 180px;
}

.box {
  width: 100px;
  height: 100px;
  /* Добавьте позиционирование */
  input1: input2;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
}

.blue {
  background-color: blue;
  top: 40px;
  left: 40px;
}

.green {
  background-color: green;
  top: 60px;
  left: 60px;
}

HTML

<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
</div>

Когда позиционированные элементы (с `position: absolute`, `relative`, `fixed` или `sticky`) не имеют явно заданного `z-index`, они накладываются в том порядке, в котором они появляются в HTML-коде. Последний элемент в коде будет отображаться поверх предыдущих. Вам нужно добавить `position: absolute` ко всем трем квадратам.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Изменение порядка наложения для трех элементов

id: 37320_zindex-5

Используя знания из предыдущих заданий, измените порядок наложения трех квадратов. Сделайте так, чтобы синий квадрат был самым нижним, зеленый — посередине, а красный — самым верхним.

CSS

.container {
  position: relative;
  height: 180px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
  /* Самый высокий z-index */
  input1: input2;
}

.blue {
  background-color: blue;
  top: 40px;
  left: 40px;
  /* Самый низкий z-index */
  input3: input4;
}

.green {
  background-color: green;
  top: 60px;
  left: 60px;
  /* Средний z-index */
  input5: input6;
}

                     .container {
  position: relative;
  height: 180px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
  /* Самый высокий z-index */
  input1: input2;
}

.blue {
  background-color: blue;
  top: 40px;
  left: 40px;
  /* Самый низкий z-index */
  input3: input4;
}

.green {
  background-color: green;
  top: 60px;
  left: 60px;
  /* Средний z-index */
  input5: input6;
}

HTML

<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
</div>

Примените свойство `z-index` к каждому квадрату. Элемент с большим значением `z-index` будет отображаться поверх элемента с меньшим значением. Вы можете использовать значения, например, 1, 2 и 3.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37320_zindex-6

Внутри родительского элемента (`parent`) с `position: relative` и `z-index: 1` находятся два дочерних элемента (`child-1`, `child-2`). Сделайте так, чтобы `child-2` (зеленый) оказался поверх `child-1` (синий), но оба остались внутри родительского элемента и под элементом `sibling` (красный).

CSS

.container {
  position: relative;
  height: 200px;
}

.sibling {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: red;
  top: 0;
  left: 80px;
  z-index: 2; /* Выше родителя */
}

.parent {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 1; /* Создает контекст наложения */
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
}

.child-1 {
  background-color: blue;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.child-2 {
  background-color: green;
  top: 30px;
  left: 30px;
  /* Добавьте z-index больше, чем у child-1 */
  input1: input2;
}

                     .container {
  position: relative;
  height: 200px;
}

.sibling {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: red;
  top: 0;
  left: 80px;
  z-index: 2; /* Выше родителя */
}

.parent {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 1; /* Создает контекст наложения */
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
}

.child-1 {
  background-color: blue;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.child-2 {
  background-color: green;
  top: 30px;
  left: 30px;
  /* Добавьте z-index больше, чем у child-1 */
  input1: input2;
}

HTML

<div class="container">
  <div class="sibling"></div>
  <div class="parent">
    <div class="child child-1"></div>
    <div class="child child-2"></div>
  </div>
</div>

Родительский элемент с `position` и `z-index` создает новый *контекст наложения*. Дочерние элементы (`child-1`, `child-2`) теперь сравнивают свои `z-index` только между собой внутри этого контекста. Чтобы `child-2` был выше `child-1`, задайте ему `z-index` больше, чем у `child-1` (у которого `z-index: 1`). Помните, что оба дочерних элемента уже позиционированы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37320_zindex-7

Зеленый дочерний элемент (`child`) имеет `z-index: 999`, но он все равно отображается под красным элементом (`sibling`), у которого `z-index: 2`. Это происходит потому, что родитель (`parent`) имеет `opacity` меньше 1, что создает новый контекст наложения. Уберите свойство, создающее новый контекст наложения у родителя, чтобы зеленый квадрат оказался поверх красного.

CSS

.container {
  position: relative;
  height: 150px;
}

.sibling {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: red;
  top: 0;
  left: 50px;
  z-index: 2;
}

.parent {
  position: absolute; /* Должен быть позиционирован для z-index */
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 1; /* Ниже, чем sibling */
  /* Уберите или закомментируйте следующую строку */
  input1: 0.9;
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  top: 10px;
  left: 10px;
  z-index: 999; /* Высокий z-index, но ограничен контекстом родителя */
}

                     .container {
  position: relative;
  height: 150px;
}

.sibling {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: red;
  top: 0;
  left: 50px;
  z-index: 2;
}

.parent {
  position: absolute; /* Должен быть позиционирован для z-index */
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 1; /* Ниже, чем sibling */
  /* Уберите или закомментируйте следующую строку */
  input1: 0.9;
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  top: 10px;
  left: 10px;
  z-index: 999; /* Высокий z-index, но ограничен контекстом родителя */
}

HTML

<div class="container">
  <div class="sibling"></div>
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

Свойства, такие как `opacity` со значением меньше 1, `transform`, `filter` (не `none`), создают новый контекст наложения, даже если у элемента нет `z-index`. Внутри этого контекста дочерние элементы не могут подняться выше элементов вне этого контекста, если сам контекст находится ниже. Чтобы `child` с `z-index: 999` поднялся над `sibling` с `z-index: 2`, нужно убрать `opacity: 0.9` у элемента `parent`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37320_zindex-8

Аналогично предыдущему заданию, зеленый дочерний элемент (`child`) с `z-index: 999` не может подняться над красным (`sibling`) с `z-index: 2`. На этот раз причиной является свойство `transform` у родителя (`parent`). Измените CSS так, чтобы зеленый квадрат оказался поверх красного, не удаляя позиционирование или `z-index`.

CSS

.container {
  position: relative;
  height: 150px;
}

.sibling {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: red;
  top: 0;
  left: 50px;
  z-index: 2;
}

.parent {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 1;
  /* Уберите или закомментируйте следующую строку */
  input1: translateX(0);
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  top: 10px;
  left: 10px;
  z-index: 999;
}

                     .container {
  position: relative;
  height: 150px;
}

.sibling {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: red;
  top: 0;
  left: 50px;
  z-index: 2;
}

.parent {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 1;
  /* Уберите или закомментируйте следующую строку */
  input1: translateX(0);
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  top: 10px;
  left: 10px;
  z-index: 999;
}

HTML

<div class="container">
  <div class="sibling"></div>
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

Свойство `transform` (со значением, отличным от `none`) также создает новый контекст наложения. Чтобы дочерний элемент мог использовать свой `z-index` в глобальном контексте (или контексте более высокого уровня), родитель не должен создавать свой собственный контекст наложения таким образом. Уберите или закомментируйте свойство `transform` у элемента `parent`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Фиксированный элемент поверх всего

id: 37320_zindex-9

Есть кнопка с классом `fixed-button`, которая должна быть всегда видна поверх остального контента (`content`). Сейчас она перекрывается контентом. Добавьте необходимые CSS свойства, чтобы кнопка всегда была наверху.

CSS

body {
  height: 500px; /* Для демонстрации прокрутки, если нужно */
}

.content {
  position: relative; /* Создает контекст наложения */
  z-index: 1;
  background-color: lightblue;
  height: 200px;
  padding: 20px;
  margin-bottom: 20px;
}

.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  /* Добавьте z-index */
  input1: input2;
}

                     body {
  height: 500px; /* Для демонстрации прокрутки, если нужно */
}

.content {
  position: relative; /* Создает контекст наложения */
  z-index: 1;
  background-color: lightblue;
  height: 200px;
  padding: 20px;
  margin-bottom: 20px;
}

.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  /* Добавьте z-index */
  input1: input2;
}

HTML

<div class="content">
  Какой-то контент, который может перекрывать кнопку.
</div>
<button class="fixed-button">Кнопка</button>

Элементы с `position: fixed` изымаются из потока и позиционируются относительно окна браузера. Чтобы такой элемент гарантированно был поверх других элементов (даже позиционированных), ему нужно задать достаточно высокий `z-index`. Добавьте `z-index` с положительным значением для `.fixed-button`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Sticky элемент и z-index

id: 37320_zindex-10

Заголовок (`sticky-header`) должен 'прилипать' к верху контейнера при прокрутке и оставаться поверх следующего блока контента (`content-below`). Сейчас он 'прилипает', но уходит под следующий блок. Исправьте это.

CSS

.scroll-container {
  height: 250px;
  overflow-y: auto;
  border: 1px solid #ccc;
  position: relative; /* Контекст для sticky */
}

.sticky-header {
  position: input1;
  top: 0;
  background-color: orange;
  padding: 10px;
  /* Добавьте z-index */
  input2: input3;
}

.content-below {
  height: 300px;
  background-color: lightgreen;
  padding: 10px;
  position: relative; /* Для демонстрации перекрытия */
  z-index: 0;
}

                     .scroll-container {
  height: 250px;
  overflow-y: auto;
  border: 1px solid #ccc;
  position: relative; /* Контекст для sticky */
}

.sticky-header {
  position: input1;
  top: 0;
  background-color: orange;
  padding: 10px;
  /* Добавьте z-index */
  input2: input3;
}

.content-below {
  height: 300px;
  background-color: lightgreen;
  padding: 10px;
  position: relative; /* Для демонстрации перекрытия */
  z-index: 0;
}

HTML

<div class="scroll-container">
  <div class="sticky-header">Прилипающий заголовок</div>
  <div class="content-below">
    Прокручиваемый контент...
    <br>...
    <br>...
    <br>...
    <br>...
    <br>...
    <br>...
  </div>
</div>

Элементы с `position: sticky` ведут себя как `relative` до тех пор, пока не достигнут указанного порога (например, `top: 0`), после чего ведут себя как `fixed`. Чтобы 'прилипший' элемент отображался поверх следующего контента, ему нужен `z-index`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вложенные контексты наложения

id: 37320_zindex-11

Имеется сложная структура: grandparent -> parent -> child. У `grandparent` `z-index: 10`. У `parent` `position: relative` (но без `z-index`), что не создает нового контекста. У `child` `z-index: 1`. Есть также `uncle` с `z-index: 5`. Сейчас `child` находится под `uncle`. Сделайте так, чтобы `parent` создавал новый контекст наложения, и `child` (несмотря на `z-index: 1`) оказался над `uncle` (из-за высокого `z-index` у `grandparent`).

CSS

.container {
  position: relative;
  height: 200px;
}

.uncle {
  position: absolute;
  width: 100px;
  height: 150px;
  background-color: red;
  top: 10px;
  left: 120px;
  z-index: 5;
}

.grandparent {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 10; /* Высокий z-index, создает контекст */
}

.parent {
  position: relative; /* Уже позиционирован */
  width: 120px;
  height: 120px;
  background-color: lightblue;
  top: 10px;
  left: 10px;
  /* Добавьте z-index для создания контекста */
  input1: input2;
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  top: 10px;
  left: 10px;
  z-index: 1; /* z-index внутри контекста parent */
}

                     .container {
  position: relative;
  height: 200px;
}

.uncle {
  position: absolute;
  width: 100px;
  height: 150px;
  background-color: red;
  top: 10px;
  left: 120px;
  z-index: 5;
}

.grandparent {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: lightgrey;
  top: 30px;
  left: 20px;
  z-index: 10; /* Высокий z-index, создает контекст */
}

.parent {
  position: relative; /* Уже позиционирован */
  width: 120px;
  height: 120px;
  background-color: lightblue;
  top: 10px;
  left: 10px;
  /* Добавьте z-index для создания контекста */
  input1: input2;
}

.child {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  top: 10px;
  left: 10px;
  z-index: 1; /* z-index внутри контекста parent */
}

HTML

<div class="container">
  <div class="uncle">Uncle (z:5)</div>
  <div class="grandparent">
    Grandparent (z:10)
    <div class="parent">
      Parent (pos:rel)
      <div class="child">Child (z:1)</div>
    </div>
  </div>
</div>

Чтобы `parent` создал новый контекст наложения, ему нужно добавить свойство `z-index` (любое числовое значение, даже 0, сработает, если `position` не `static`). Когда `parent` создает контекст, `child` с `z-index: 1` будет выше `uncle` с `z-index: 5`, потому что `grandparent` (контекст для `parent` и `uncle`) имеет `z-index: 10`, что ставит весь его подстек (включая `parent` и `child`) выше `uncle`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Изображение под текстом

id: 37320_zindex-12

Используя одну из предоставленных картинок в качестве фона для блока `image-container`, сделайте так, чтобы текст в блоке `text-overlay` отображался поверх этой картинки. Картинка должна быть видна под текстом.

CSS

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://naytikurs.ru/img/8.png');
  background-size: cover;
  background-position: center;
  /* Поместить под текст */
  input1: input2;
}

.text-overlay {
  position: relative; /* Создает контекст и позволяет использовать z-index */
  padding: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для читаемости */
  text-align: center;
  /* Убедиться, что текст поверх картинки */
  input3: input4;
}

                     .container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://naytikurs.ru/img/8.png');
  background-size: cover;
  background-position: center;
  /* Поместить под текст */
  input1: input2;
}

.text-overlay {
  position: relative; /* Создает контекст и позволяет использовать z-index */
  padding: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для читаемости */
  text-align: center;
  /* Убедиться, что текст поверх картинки */
  input3: input4;
}

HTML

<div class="container">
  <div class="image-container"></div>
  <div class="text-overlay">
    Этот текст должен быть поверх картинки.
  </div>
</div>

Чтобы текст (`text-overlay`) оказался поверх блока с фоновой картинкой (`image-container`), можно использовать `z-index`. Оба элемента должны быть позиционированы. Присвойте `image-container` более низкий `z-index` (например, -1), а `text-overlay` - более высокий `z-index` (например, 1) или оставьте `auto` (0), при условии, что он идет позже в HTML или его родительский контекст выше.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку