Позиционирование / position: absolute и свойство left [10/20]
×

position: absolute и свойство left [10/20]

Свойства left, top, right и bottom по-разному работают для элементов с абсолютным и относительным позиционированием.

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

По умолчанию такой системой координат является окно браузера, а точки начала координат привязаны к его углам.

Свойство left задает отступ от левого края окна браузера до левого края абсолютно спозиционированного элемента. Если свойству задать отрицательное значение, то элемент сместится за левый край браузера (при этом полоса прокрутки не появится).

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>position: absolute и свойство left</title> </head> <body> <div class="block">Блок 1</div> <div class="block-absolute">Блок 2</div> <div class="block">Блок 3</div> </body> </html>
CSS
body { padding: 20px; } .block { margin-bottom: 20px; padding: 10px; text-align: center; color: white; background: #3a78a1; } .block-absolute { position: absolute; width: 100px; margin-bottom: 20px; padding: 10px; color: white; background: rgba(255, 0, 0, 0.5); }
HTML Academy

Задайте блоку с классом block-absolute свойство left:

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

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

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

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

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