Позиционирование / Неявная точка отсчёта [16/20]
×

Неявная точка отсчёта [16/20]

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

Такой элемент можно сместить из неявной точки отсчета с помощью свойства margin. Оно будет работать примерно так же, как и свойства left ... bottom для «относительного» элемента.

Кстати, когда значение для left не задано, оно равно auto. То же верно и для оставшихся трёх свойств. С помощью значения auto можно возвращать «абсолютные» элементы на исходное положение.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Неявная точка отсчета</title> </head> <body> <div class="block">Что будет, если какому-нибудь элементу задать абсолютное позиционирование, <span class="inline-absolute">но при этом</span> не задавать никаких свойств, влияющих на его расположение (например, left)?</div> <div class="block">Такой элемент выпадет из <span class="inline-absolute">потока</span>, но останется на том месте, где был расположен до <span class="inline-absolute">этого.</span></div> </body> </html>
CSS
body { padding: 10px; } .block { margin: 10px; padding: 20px; color: white; background: #3a78a1; } .inline-absolute { background: #e74c3c; opacity: 0.8; }
HTML Academy

Задайте элементам с классом inline-absolute:

  1. абсолютное позиционирование,
  2. отступ сверху (margin) -15px,
  3. отступ слева (margin) 15px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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