CSS свойство position

Свойство position помогает управлять расположением элементов на странице. Например, следующие инструкции:

.element {
  position: relative;
  top: 10px;
}

сместят элемент относительно своего исходного положения вниз на 10px.

Синтаксис

position: static | absolute | relative | fixed | sticky | inherit

Свойство может применяться вместе с указанием отступа от краев контейнера (левого, нижнего, правого, верхнего).

Например, создадим два контейнера, родительский (parent) – в синей рамке и дочерний (element) внутри него. Для дочернего элемента установим относительное позиционирование relative и сдвиги сверху и слева по 10px.

.element {
position: relative;
  top: 10px;
  left: 10px;
}

Результат выполнения видно ниже.

See the Pen
position relative
by Андрей (@adlibi)
on CodePen.

Значения

Свойство position может принимать следующие значения:

static
По умолчанию каждый элемент имеет положение static, при котором он находится в обычном потоке страницы. Если установлено, то применение lefttopright и bottom не имеет никакого воздействия.
absolute
Элемент удаляется из потока документа, а другие блоки будут вести себя так, как будто его нет. Положение блока определяется значениями toprightbottom, и left. Блок расположится как бы поверх всех элементов. Учтите, что на местоположение влияет значение свойства position его предка. Позиционирование идет от ближайшего предка со значением position не равном static. Если такого не найдется, отсчет координат идет от документа.
relative
Позиционируется обычным образом, а затем смещается относительно своей позиции в соответствии со значениями toprightbottom и left. Такое смещение не влияет на местоположение других элементов.
fixed
При указании этого значения элемент привязывается к точке на экране, указанной значениями lefttopright и bottom, при этом блок не меняет своего положения при прокрутке документа.
sticky
Экспериментальное свойство – элемент обрабатывается как имеющий относительное положение до тех пор, пока положение прокрутки области просмотра не достигнет указанного порога, после чего блок занимает фиксированное положение, в котором он и остается.
inherit
Это значение можно использовать, чтобы принудительно заставить наследовать значение позиционирования от его предка.

Координаты

Для сдвига можно использовать четыре координаты:

  • top – сдвиг от верхней границы
  • bottom – сдвиг от нижней границы
  • left – сдвиг слева
  • right – сдвиг справа

Не будут работать одновременно указанные top и bottomleft и right. Нужно использовать только одну границу из каждой пары.

В качестве указания значений можно использовать принятые в CSS единицы измерения: px, em и т.п., а также проценты. Так, left: 10% сместит элемент на 10% его ширины вправо.

Возможны отрицательные координаты. При смещении часть элемента может оказаться за границей контейнера или документа.

Рассмотрим их работу подробнее на примерах.

Абсолютное позиционирование

Если дочерний элемент имеет абсолютное значение, то родительский будет вести себя так, как будто дочернего вообще нет. Элемент позиционируется относительно своего ближайшего предка, который не является static. Если такого не найдется, тогда он спозиционируется относительно страницы.

Создадим два блока. При этом для предка не будем устанавливать position, а для дочернего зададим:

div.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

В результате видим, что элемент расположился относительно всего документа (прижался к его низу), а не своего предка.

See the Pen
position absolute 2
by Андрей (@adlibi)
on CodePen.

Таким образом для корректного положения нужно задать позиционирование для предка. Например:

.parent {
  position: relative;
}

Теперь свойства top, bottom, left, right соотносятся с предком и видно, как изменилось положение элемента – получилось прижать элемент к низу блока-родителя.

See the Pen
position absolute
by Андрей (@adlibi)
on CodePen.

Кроме того:

  • Ширина элемента с position: absolute устанавливается по содержимому.
  • Элемент получает свойство display:block.

Фиксированное позиционирование

Значение fixed по воздействию похоже на  абсолютное позиционирование. Оно поможет расположить элемент в любом месте  документа, но это расположение не будет меняться при прокрутке документа. Посмотрите на поведение дочернего элемента на демонстрации ниже, на то, как при прокрутке он продолжает оставаться внизу страницы.

See the Pen e0e72fa57f387265fb7a3aa7a296d684 by CSS-Tricks (@css-tricks) on CodePen.

Для закрепления блока внизу экрана использовалось bottom, и точно также вы можете поднять его вверх используя свойство top.

При position, установленном в значения absolute или fixed, свойство display по умолчанию устанавливается в block, а float — в none.

“Липкое” позиционирование

Sticky можно перевести как “липкий”. Это некий компромисс между относительным и фиксированным значениями. На текущий момент это экспериментальное значение и не является частью официальной спецификации. Оно лишь частично поддерживается некоторыми браузерами. Поэтому, вероятно, пока не стоит использовать его на рабочих проектах.

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

Sticky элемент «прилипает» к своему ближайшему предку с прокруткой, созданной при overflow равном hiddenscrollauto или overlay, даже если тот не является ближайшим фактически прокручивающим родителем.

Возьмем пример:

.element {
  position: sticky; top: 30px;
}

Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.

Следующий пример демонстрирует иллюстрирует момент, где первое меню навигации имеет относительное позиционирование по умолчанию, а второе меню настроено на закрепление в самом верху области просмотра. Этот пример будет работать в Chrome, Safari и Opera, а в остальных браузерах только если они уже доработали его поддержку.

See the Pen
position sticky
by Андрей (@adlibi)
on CodePen.

Оцените статью
Инструкции для Web
Комментарии: 1
  1. Виктор Щигольков

    Ух помню я намучился с этим свойством! Ведь начинал свое сайтостроительство с нуля в полном смысле этого слова, вначале выбрав “Нетхаус” с недоступным CSS, а потом перепрыгнув с него на Джимдо. Ну нравились мне плавающие и замирающие над футером блоки, а как их делать я понятия не имел. И хорошо что есть вот такие сайты как этот, однажды наткнулся на статью и все понял за каких-то пять минут!

    Ответить
Добавить комментарии