Знакомство с CSS / Позиционирование элементов [6/15]
×

Позиционирование элементов [6/15]

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

Главным свойством для работы с позиционированием является position, которое переключает режимы позиционирования элемента. Ещё четыре свойства: top, right, bottom, left, управляют расположением элемента. И последнее свойство z-index управляет порядком слоёв.

В этом задании мы изменим стандартный режим позиционирования элемента на абсолютный и поперемещаем элемент.

Более подробно теория и практика позиционирования элементов будет рассмотрена в курсе «Позиционирование».


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Позиционирование элементов</title> </head> <body> <h1>Как выпасть из потока?</h1> <p>Существует понятие «document flow» или «поток документа». Оно определяет то, как располагаются элементы на HTML-странице.</p> <p class="p-absolute">Абсолютно позиционированные элементы исключаются из потока.</p> <p>Другие элементы как бы перестают их замечать и то место, где располагается абсолютно позиционированный элемент, считают пустым.</p> </body> </html>
CSS
.p-absolute { padding: 20px; background-color: rgba(0, 255, 0, 0.25); }
HTML Academy

Спозиционируйте абсолютно один из абзацев.

  1. Добавьте в CSS-правило для класса p-absolute свойство position: absolute;.
  2. Затем туда же свойство left: 100px;
  3. и свойство bottom: 200px;.

Используемые свойства детально разобраны в курсе «Позиционирование».

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

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

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

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

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