CSS стиль position

CSS стиль position определяет, как элемент должен быть спозиционирован на web-странице.

Настольные Мобильные

Краткая информация по CSS-свойству position

Значение по умолчанию	`static`
Наследуется	Нет
Применяется	Ко всем элементам

Правила написания свойства position

position: absolute | fixed | relative | static
 | sticky

absolute - элемент становится абсолютно позиционированым, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента не существует. Положение элемента задается свойствами left, top, right и bottom. Также на положение элемента влияет значение свойства position родительского элемента. Так, если у родителя position: static или нет родителя, то отсчет координат будет вестись от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат будет вестись от края родительского элемента.

fixed - по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке страницы. Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. Opera показывает полосы прокрутки, но они не влияют на позицию элемента.

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

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

sticky - позволяет создавать «липкие» блоки, которые будут вести себя как фиксированные, но при этом не перекрывать другие блоки. Т.е, пока на странице есть свободное место, блок остается на месте, но, если при скролле страницы на «липкий» блок наезжают другие блоки, они сдвигают его.

Значение sticky поддерживается в Firefox 43+, с префиксом -webkit - в Safari 9+ и iOS Safari 8.4+.

Объектная модель

Объект.style.position

Пример применения стиля position

Проиллюстрируем работу position на примере, рассмотрев работу свойств position: relative; и position: absolute;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля position</title>
<style>
div {
    background: red;
    position: relative;
    width: 20px;
    height: 20px;
    top:20px;
    left:50px;
}
.abs {
    position: absolute;
    background: blue;
}
</style>
</head>
<body>
  <div>
    <div class="abs"></div>
  </div>
</body>
</html>

Применение свойства position