Свойство position: позиционирование
Чем отличаются relative, absolute, fixed и sticky и как выбрать точку отсчёта.
Как это работает
position задаёт способ позиционирования элемента. relative сохраняет место в потоке и позволяет смещение. absolute выводит элемент из обычного потока; точка отсчёта часто связана с ближайшим позиционированным предком.
fixed обычно привязан к окну просмотра, а sticky сочетает обычное положение с прилипанием внутри области прокрутки. Для sticky нужно задать порог, например top: 0. Трансформации и некоторые другие свойства предков могут менять содержащий блок, поэтому проверяйте структуру целиком.
Пример в интерфейсе
.card { position: relative; padding: 35px 20px 20px; background: #eaf4ee; min-height: 130px; }
.label { position: absolute; top: 8px; right: 8px; font-size: 12px; color: #11694e; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| relative | Сохраняет место, создаёт удобную опору для потомков. |
| absolute | Свободное размещение вне обычного потока. |
| fixed | Обычно позиционирование относительно окна. |
| sticky | Прилипание при достижении заданного порога. |
На что обратить внимание
Абсолютное позиционирование всего макета редко выдерживает длинный текст и мобильную ширину. Для основных колонок используйте Grid или Flexbox.
Проверьте на практике
Переместите метку из правого верхнего угла в левый нижний, изменив inset-свойства. Родитель должен оставаться position: relative.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.