middle
Какие значения может принимать свойство position?
Свойство position определяет способ позиционирования элемента в документе и влияет на то, как работают свойства top, right, bottom, left.
| Значение | Поток | Точка отсчёта | Скролл | Описание |
|---|---|---|---|---|
static |
Да | — | — | По умолчанию, обычный поток. top/left не работают |
relative |
Да (место сохраняется) | Собственная позиция | Скроллится | Сдвигается относительно своей нормальной позиции |
absolute |
Нет (изъят из потока) | Ближайший positioned-предок | Скроллится | Позиционирование относительно предка с position != static |
fixed |
Нет (изъят из потока) | Viewport (окно браузера) | Не скроллится | Фиксируется в окне браузера |
sticky |
Да (до порога) | Ближайший scroll-контейнер | Переключается | Ведёт себя как relative, пока не достигнет порога — затем как fixed |
Примеры использования
Пример
/* Модальное окно по центру экрана */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Sticky-шапка таблицы */
thead th {
position: sticky;
top: 0;
background: white;
}
/* Бейдж на иконке */
.icon-wrapper {
position: relative;
}
.badge {
position: absolute;
top: -5px;
right: -5px;
}
Positioned-предок
Для absolute браузер поднимается по DOM вверх в поисках предка с position != static. Если такого нет — позиционирует относительно <html>. Поэтому часто родителю задают position: relative без сдвига.
На собеседовании: интервьюер часто просит объяснить разницу между
absoluteиfixed, или решить задачу с позиционированием элемента. Частая ошибка — забыть, чтоabsoluteищет positioned-предка, а не просто родителя.