Свойство z-index и порядок наложения элементов: Тренажер CSS

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

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

Список тем

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

Два квадрата частично перекрывают друг друга. Красный квадрат находится над синим по умолчанию из-за порядка в 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 работает только с позиционированием

Красный квадрат находится над синим. Мы пытаемся поднять синий квадрат с помощью `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

Используйте отрицательное значение `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

Три квадрата расположены в 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` ко всем трем квадратам.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Внутри родительского элемента (`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`

Зеленый дочерний элемент (`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`

Аналогично предыдущему заданию, зеленый дочерний элемент (`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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Есть кнопка с классом `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

Заголовок (`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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Имеется сложная структура: 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Используя одну из предоставленных картинок в качестве фона для блока `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 или его родительский контекст выше.

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

Результат

Сообщения

Выполнить

Отметить решенным

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