Позиционирование / Относительное позиционирование [2/20]
×

Относительное позиционирование [2/20]

CSS-свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование».

Значение relative обозначает «относительное позиционирование». Относительно спозиционированный элемент можно перемещать относительно его исходного положения.

Относительно спозиционированный элемент остается в потоке документа, а при его перемещении наблюдаются интересные эффекты. Для начала просто зададим относительное позиционирование выбранному блоку.

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Относительное позиционирование</title> </head> <body> <div class="block">Блок 1</div> <div class="block-shadow"> <div class="block-relative">Блок 2</div> </div> <div class="block">Блок 3</div> </body> </html>
CSS
body { padding: 20px; } .block { margin-bottom: 20px; padding: 10px; color: white; background: #3a78a1; } .block-relative { margin-bottom: 20px; padding: 10px; color: white; background: #3a78a1; } .block-shadow { background: #cccccc; }
HTML Academy
  1. Задайте блоку с классом block-relative относительное позиционирование.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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