CSS рассматривает каждый элемент HTML как отдельный блок, который обычно называют блочной моделью (Box model). Блочные элементы автоматически начинаются с новой строки (например, заголовки (h1 -h6), абзацы и блоки div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения). Такой способ размещения элементов по умолчанию называется нормальным потоком документа, но CSS предлагает свойство position для его переопределения.
Когда положение элемента (css свойство position) установлено как относительное (relative), это позволяет вам указать, как CSS должен перемещать его относительно его текущей позиции в нормальном потоке страницы. Свойство position сочетается со свойствами смещения CSS: left , right, top или bottom. Эти свойства указывают, на сколько пикселей, процентов или em нужно переместить элемент от того места, где он обычно находится. В следующем примере абзац (тег p) перемещается на 10 пикселей от нижнего края:
p {
position: relative;
bottom: 10px;
}
Изменение положения элемента (свойство position) на относительное(relative ) не удаляет его из обычного потока - другие элементы вокруг него по-прежнему ведут себя так, как если бы этот элемент находился в своей позиции по умолчанию.
Примечание. Позиционирование дает вам большую гибкость и власть над визуальным макетом страницы. Следует помнить, что независимо от положения элементов, HTML разметка документа должна быть организована и иметь смысл при чтении сверху вниз. Таким образом пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как программы чтения с экрана) получают доступ к вашему контенту.
Задание:
- Установите для заголовка h2 относительное позиционирование
- Используя смещение CSS, переместите заголовок h2 на 15 пикселей от верха того места, где он находится в нормальном потоке.
