Позиционирование / z-index или кто кого перекроет [19/20]
×

z-index или кто кого перекроет [19/20]

Если в одном месте страницы оказываются несколько «абсолютных» блоков, то они перекрывают друг друга. По умолчанию выше оказывается тот блок, который расположен дальше в коде страницы.

C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем больше z-index, тем выше располагается блок.

Cвойство z-index работает для элементов, у которых position задано как absolute, fixed и relative. Таким образом, «относительный» элемент может перекрывать «абсолютный».

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>z-index или кто кого перекроет</title> </head> <body> <div class="block block-1">Блок 1</div> <div class="block block-2">Блок 2</div> <div class="block block-3">Блок 3</div> </body> </html>
CSS
body { margin: 0; padding: 20px; } .block { padding: 10px; text-align: right; color: white; opacity: 0.8; } .block-1 { width: 350px; height: 350px; background: #3a78a1; } .block-2 { position: absolute; top: 20px; width: 250px; height: 250px; background: #e74c3c; } .block-3 { position: absolute; top: 20px; width: 150px; height: 150px; background: #27ae60; }
HTML Academy
  1. Задайте блоку 2 z-index со значением 100.
  2. Задайте блоку 1 относительное позиционирование
  3. и z-index со значением 200.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.