Что такое position: relative, absolute, fixed и sticky?
Совсем запутался в position. Когда relative, когда absolute, что такое fixed и sticky? Поставил position: absolute — элемент улетел в угол. Объясните разницу на пальцах с примерами.
2 ответа
Свойство position меняет, относительно чего элемент позиционируется через top/right/bottom/left.
static — значение по умолчанию: элемент в обычном потоке, top/left игнорируются.
relative — остаётся на своём месте в потоке, но его можно сдвинуть относительно самого себя. Главное применение — стать «якорем» для absolute-детей.
.parent { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }
absolute — выпадает из потока и позиционируется относительно ближайшего предка с position, отличным от static. Если такого нет — относительно всей страницы (вот почему элемент «улетел в угол» — у родителя не было position: relative).
fixed — выпадает из потока и крепится к окну браузера. Не двигается при прокрутке — идеально для плавающих кнопок и шапок.
.to-top { position: fixed; bottom: 20px; right: 20px; }
sticky — гибрид: ведёт себя как relative, пока не доскроллишь до заданного порога, а дальше «прилипает» как fixed.
.header { position: sticky; top: 0; }
Запоминалка: relative — «чуть подвинуть и быть якорем», absolute — «привязать к родителю-якорю», fixed — «прибить к экрану», sticky — «липнет при скролле».
Самая частая ошибка с absolute — забыть position: relative у родителя. Тогда отсчёт идёт от всего документа, и элемент уезжает не туда. Правило: почти всегда absolute-ребёнок требует relative-родителя. А для sticky важно, чтобы был задан хотя бы один порог (top, bottom и т.п.) и чтобы у родителя не стоял overflow: hidden — иначе залипание не сработает.