Как позиционировать элементы в CSS. Свойство position
Чтобы создавать сложные макеты или интерактивные элементы, нужно управлять местоположением элементов на странице. Для этого есть CSS-свойство position . Оно определяет, где находится элемент на веб-странице.
⭐ Поддержка браузерами свойства position
Значения свойства position
- static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа;
- relative — элемент позиционируется относительно своего исходного положения в потоке документа;
- absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static ;
- fixed — элемент позиционируется относительно окна браузера;
- sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.
Static
Static является значением по умолчанию для всех элементов и будет отображаться на странице в соответствии с порядком элемента в документе. Это значение используется редко и, как правило, не требует дополнительных параметров.
Пример использования свойства position со значением static .
Первый блок Второй Третий Четвёртый 
Relative
Relative определяет позиционирование элемента относительно его стандартного местоположения на странице. При использовании этого значения можно задать дополнительные параметры, такие как top , bottom , left и right , которые указывают на смещение элемента относительно его стандартного местоположения.
Пример использования свойства position со значением relative .
Absolute
Absolute задаёт точное местоположение элемента на странице, независимо от других элементов на странице. При использовании значения можно задать параметры top , bottom , left и right , чтобы определить точное местоположение элемента.
Пример использования свойства position со значением absolute .
Fixed
Fixed задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. При использовании этого значения также можно задать параметры top , bottom , left и right , чтобы определить точное местоположение элемента.
Пример использования свойства position со значением fixed .
Sticky
Sticky начинает себя вести как обычный элемент до тех пор, пока не достигнет определенной позиции на странице, которую вы зададите с помощью свойства ** top , right , bottom или left . Как только элемент достигнет этой позиции при прокрутке страницы, он зафиксируется на месте и будет оставаться там до тех пор, пока пользователь не доскроллит страницу обратно.
Пример использования свойства position со значением sticky .
Нюансы использования
- Если у элемента значение свойства position установлено в absolute или fixed , то такой элемент будет выведен из обычного потока документа и может перекрыть другие элементы. Если это не предполагается, то нужно следить за порядком элементов на странице и настройками z-index .
- Если у элемента значение свойства position установлено в relative , то это не влияет на позиции других элементов на странице.
- Значение свойства position может также влиять на поведение других свойств, например, на позиционирование через top , left , bottom и right .
- Использование свойства position вместе с другими свойствами, например, transform или display , может дать неожиданные результаты и требует более тщательного тестирования на разных браузерах и устройствах.
- Значение sticky может привести к проблемам с доступностью. Если элемент со значением sticky перекрывает другие элементы на странице, это может затруднить доступ к этим элементам для людей, использующих скринридеры.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.