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

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

В реальных проектах относительное позиционирование может использоваться для создания декоративных эффектов, хотя область его применения намного шире.

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Относительное позиционирование на практике</title> </head> <body> <div class="frame"> <img width="150" src="/themes/htmlacademy/img/opinions/morozov.jpg" alt=""> </div> <div class="frame"> <img width="75" src="/themes/htmlacademy/img/opinions/efimova.jpg" alt=""> </div> </body> </html>
CSS
.frame { display: inline-block; margin: 10px; background-color: #27ae60; border-radius: 6px; } .frame img { display: block; border-radius: 5px; }
HTML Academy

Задайте для изображений следующие CSS-свойства:

  1. относительное позиционирование,
  2. координату сверху -5px,
  3. координату слева -5px.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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