Свойство 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
, при котором он находится в обычном потоке страницы. Если установлено, то применениеleft
,top
,right
иbottom
не имеет никакого воздействия. - absolute
- Элемент удаляется из потока документа, а другие блоки будут вести себя так, как будто его нет. Положение блока определяется значениями
top
,right
,bottom
, иleft
. Блок расположится как бы поверх всех элементов. Учтите, что на местоположение влияет значение свойстваposition
его предка. Позиционирование идет от ближайшего предка со значениемposition
не равномstatic
. Если такого не найдется, отсчет координат идет от документа.
- relative
- Позиционируется обычным образом, а затем смещается относительно своей позиции в соответствии со значениями
top
,right
,bottom
иleft
. Такое смещение не влияет на местоположение других элементов. - fixed
- При указании этого значения элемент привязывается к точке на экране, указанной значениями
left
,top
,right
иbottom
, при этом блок не меняет своего положения при прокрутке документа. - sticky
- Экспериментальное свойство – элемент обрабатывается как имеющий относительное положение до тех пор, пока положение прокрутки области просмотра не достигнет указанного порога, после чего блок занимает фиксированное положение, в котором он и остается.
- inherit
- Это значение можно использовать, чтобы принудительно заставить наследовать значение позиционирования от его предка.
Координаты
Для сдвига можно использовать четыре координаты:
top
– сдвиг от верхней границыbottom
– сдвиг от нижней границыleft
– сдвиг слеваright
– сдвиг справа
Не будут работать одновременно указанные top
и bottom
, left
и 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
равном hidden
, scroll
, auto
или overlay
, даже если тот не является ближайшим фактически прокручивающим родителем.
Возьмем пример:
.element {
position: sticky; top: 30px;
}
Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.
Следующий пример демонстрирует иллюстрирует момент, где первое меню навигации имеет относительное позиционирование по умолчанию, а второе меню настроено на закрепление в самом верху области просмотра. Этот пример будет работать в Chrome, Safari и Opera, а в остальных браузерах только если они уже доработали его поддержку.
See the Pen
position sticky by Андрей (@adlibi)
on CodePen.
Ух помню я намучился с этим свойством! Ведь начинал свое сайтостроительство с нуля в полном смысле этого слова, вначале выбрав “Нетхаус” с недоступным CSS, а потом перепрыгнув с него на Джимдо. Ну нравились мне плавающие и замирающие над футером блоки, а как их делать я понятия не имел. И хорошо что есть вот такие сайты как этот, однажды наткнулся на статью и все понял за каких-то пять минут!