• Теория
  • Теория

Наложение элементов грида и свойство z-index

Напоминает абсолютное позиционирование, не правда ли?

Как и на абсолютно спозиционированные элементы, на пересекающиеся грид-элементы действует свойство z-index. Это свойство управляет тем, как перекрываются элементы. Значение этого свойства — целое число:

.element {
  z-index: 2;
}

Чем больше значение z-index, тем выше элемент в «стопке». Если у двух элементов одинаковый z-index, то выше будет располагаться тот, который идёт следующим по разметке.

Проверим этот момент на практике.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс «HTML и CSS. Профессиональная вёрстка сайтов». Цена 8000 ₽.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с гридами» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.