Позиционирование / Тренируемся задавать координаты [15/20]
×

Тренируемся задавать координаты [15/20]

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

Синие прямоугольники спозиционированы относительно, поэтому у каждого красного квадрата своя система координат.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Тренируемся задавать координаты</title> </head> <body> <div class="block block-1"> <div class="block-absolute"></div> </div> <div class="block block-2"> <div class="block-absolute"></div> </div> </body> </html>
CSS
body { margin: 0; padding: 0; text-align: center; } .block { position: relative; display: inline-block; width: 75px; height: 100px; margin: 10px; padding: 10px; background: #3a78a1; } .block-1 { width: 150px; height: 200px; } .block-absolute { position: absolute; width: 20px; height: 20px; background: #e74c3c; }
HTML Academy

Поочередно расположите абсолютно спозиционированный блок block-absolute в каждом из четырех углов. Оступы от краев угла должны быть нулевыми.

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

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

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

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

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