Позиционирование / Абсолютное позиционирование на практике [17/20]
×

Абсолютное позиционирование на практике [17/20]

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

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Абсолютное позиционирование на практике</title> </head> <body> <div class="achievement"> <div class="badge"></div> <div class="title">Первое задание</div> <div class="description">Выполнить первое задание в курсе</div> </div> <div class="achievement"> <div class="badge"></div> <div class="title">Первое испытание</div> <div class="description">Пройти первое испытание</div> </div> </body> </html>
CSS
body { font-family: Helvetica, Arial, sans-serif; } .achievement { position: relative; width: 200px; min-height: 50px; margin-bottom: 20px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 4px; } .badge { width: 44px; height: 44px; border: 3px solid #e5e5e5; border-radius: 4px; background-color: #7fc3e5; background-image: url('/themes/htmlacademy/img/icons/medal.png'); } .title { font-size: 15px; font-weight: bold; margin-bottom: 3px; } .description { font-size: 12px; color: #666666; }
HTML Academy
  1. Задайте элементу с классом achievement внутренний отступ слева 80px.
  2. Задайте элементу с классом badge абсолютное позиционирование
  3. и координату слева 20px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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