CSS-свойство position
- 29 апреля 2023
Чтобы создавать сложные макеты или интерактивные элементы, нужно управлять местоположением элементов на странице относительно других элементов. Для этого есть CSS-свойство position
. Оно определяет, где находится элемент на веб-странице.
⭐ Поддержка браузерами свойства position
Значения свойства position
Значения position
:
static
— значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа;relative
— элемент позиционируется относительно своего исходного положения в потоке документа;absolute
— элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное отstatic
;fixed
— элемент позиционируется относительно окна браузера;sticky
— элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.
Static
Static
является значением по умолчанию для всех элементов и будет отображаться на странице в соответствии с порядком элемента в документе. Это значение используется редко и, как правило, не требует дополнительных параметров.
Пример использования свойстваposition
со значениемstatic
.
<div class="box" id="one">Первый блок</div>
<div class="box" id="two">Второй</div>
<div class="box" id="three">Третий</div>
<div class="box" id="four">Четвёртый</div>
#three {
position: static;
background: orange;
}

Relative
Relative определяет позиционирование элемента относительно его стандартного местоположения на странице. При использовании этого значения можно задать дополнительные параметры, такие как top
, bottom
, left
и right
, которые указывают на смещение элемента относительно его стандартного местоположения.
Пример использования свойстваposition
со значениемrelative
.
#two {
position: relative;
top: 20px;
left: 20px;
background: green;
}

Absolute
Absolute
задаёт точное местоположение элемента на странице, независимо от других элементов на странице. При использовании значения можно задать параметры top
, bottom
, left
и right
, чтобы определить точное местоположение элемента.
Пример использования свойстваposition
со значениемabsolute
.
#two {
position: absolute;
top: 40px;
left: 20px;
background: black;
}

Fixed
Fixed
задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. При использовании этого значения также можно задать параметры top
, bottom
, left
и right
, чтобы определить точное местоположение элемента.
Пример использования свойстваposition
со значениемfixed
.
#four {
position: fixed;
top: 40px;
left: 10px;
background: red;
}

Sticky
Sticky
начинает себя вести как обычный элемент до тех пор, пока не достигнет определенной позиции на странице, которую вы зададите с помощью свойства **top
, right
, bottom
или left
. Как только элемент достигнет этой позиции при прокрутке страницы, он зафиксируется на месте и будет оставаться там до тех пор, пока пользователь не доскроллит страницу обратно.
Пример использования свойстваposition
со значениемsticky
.
#four {
position: sticky;
top: 30px;
left: 10px;
background: red;
}

Нюансы использования
- Если у элемента значение свойства
position
установлено вabsolute
илиfixed
, то такой элемент будет выведен из обычного потока документа и может перекрыть другие элементы. Если это не предполагается, то нужно следить за порядком элементов на странице и настройкамиz-index
. - Если у элемента значение свойства
position
установлено вrelative
, то это не влияет на позиции других элементов на странице. - Значение свойства
position
может также влиять на поведение других свойств, например, на позиционирование черезtop
,left
,bottom
иright
. - Использование свойства
position
вместе с другими свойствами, например,transform
илиdisplay
, может дать неожиданные результаты и требует более тщательного тестирования на разных браузерах и устройствах. - Значение
sticky
может привести к проблемам с доступностью. Если элемент со значениемsticky
перекрывает другие элементы на странице, это может затруднить доступ к этим элементам для людей, использующих скринридеры.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как создать рамку вокруг элемента. CSS-свойство border
Цветные, точечные, пунктирные рамки и многое другое.
- 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation
Примеры и нюансы использования.
- 29 мая 2023

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как установить стиль шрифта. CSS-свойство font
Семейства шрифтов, начертание и размеры.
- 27 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023




Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023