Позиционирование в CSS
Позиционирование в CSS определяет, где элементы размещаются на странице. С его помощью можно переопределить обычный поток документа.
Свойство CSS position
Свойство position задаёт тип позиционирования элемента. Оно может принимать следующие значения:
static— значение по умолчанию. Элемент следует обычному потоку документа.relative— элемент размещается относительно своей обычной позиции.fixed— элемент размещается относительно окна просмотра (viewport).absolute— элемент размещается относительно ближайшего позиционированного предка.sticky— элемент переключается между relative и fixed в зависимости от положения прокрутки.
Затем элементы перемещаются на своё окончательное место с помощью свойств top, bottom, left и right.
CSS position: static
Все HTML-элементы по умолчанию имеют значение static. На статический элемент не влияют свойства top, bottom, left и right, и он всегда следует обычному потоку страницы.
Пример
Div использует position: static и остаётся в обычном потоке.
<style> задайте классу div.static position static и сплошную зелёную рамку 3px. Добавьте div, использующий этот класс. Статический элемент следует обычному потоку страницы.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="static">This div has position: static. It follows the normal flow of the page.</div>
</body>
</html>
CSS position: relative
Элемент со значением relative размещается относительно своей обычной позиции. Установка top, right, bottom или left смещает его от этого места. Оставшийся после него промежуток не заполняется другим содержимым.
Пример
Div смещён на 30px вправо от своей обычной позиции.
<style> задайте классу div.relative position relative, left 30px и сплошную зелёную рамку 3px. Добавьте div, использующий этот класс. Он смещается на 30px вправо от своей обычной позиции.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="relative">This div has position: relative and is moved 30px to the right of its normal position.</div>
</body>
</html>