Позиционирование / Точка отсчёта координат [14/20]
×

Точка отсчёта координат [14/20]

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

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

В этом задании вы увидите, как происходит смена системы координат (и соответственно точек отсчета). Интересно, что позиционирование по умолчанию отличается от позиционирования внутри тега body.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Точка отсчета координат</title> </head> <body> <div class="block-1"> Блок 1 <div class="block-2"> Блок 2 <div class="block-absolute"> position: absolute;<br> right: 10px;<br> top: 10px; </div> </div> </div> </body> </html>
CSS
body { margin: 10px; padding: 20px; color: white; border: 1px dotted #999999; } .block-1 { min-height: 100px; padding: 10px; background: #3a78a1; } .block-2 { min-height: 100px; padding: 10px; background: #27ae60; } .block-absolute { position: absolute; top: 10px; right: 10px; padding: 10px; font-size: 12px; font-family: "Courier New", monospace; background: #e74c3c; opacity: 0.8; }
HTML Academy

Последовательно задайте относительное позиционирование следующим элементам:

  1. элементу body,
  2. элементу с классом block-1,
  3. элементу с классом block-2.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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