Отличие position absolute от position relative

Question

position: relative смещает элемент от его нормального положения в потоке документа, при этом исходное пространство, которое он занимал, остается за ним. position: absolute полностью вырывает элемент из потока документа и позиционирует его относительно ближайшего предка с position, отличной от static (или относительно окна браузера, если такого предка нет). Проще говоря, relative — это "сдвиг с сохранением места", а absolute — "точное размещение в указанной точке".

YeaHub · Accepted Answer

Позиционирование — один из ключевых инструментов CSS для размещения элементов на странице.position: relativeПоведение в потоке: Элемент остается в общем потоке документа. Его исходное место не занимается другими элементами.Точка отсчета: Свойства top, right, bottom, left смещают элемент относительно его исходного положения.Использование: Часто используется для небольших декоративных смещений или как "контейнер-точка отсчета" для абсолютно позиционированных дочерних элементов.

Этот блок сдвинут, но его место сохранено.

.relative-box { position: relative; top: 20px; /* Сдвигается ВНИЗ на 20px от своей верхней границы */ left: 30px; /* Сдвигается ВПРАВО на 30px от своей левой границы */ }position: absoluteПоведение в потоке: Элемент полностью извлекается из потока. Его место занимают соседние элементы, как будто его не существует.Точка отсчета: Позиционируется относительно ближайшего предка, у которого значение position установлено как relative, absolute, fixed или sticky. Если такого предка нет — относительно всего документа ().Использование: Идеально для создания сложных макетов, всплывающих окон, тултипов и других элементов, которые должны быть точно привязаны к определенной области.

Этот блок позиционирован относительно контейнера.

.relative-container { position: relative; /* Создает контекст позиционирования */ width: 300px; height: 200px; } .absolute-box { position: absolute; bottom: 10px; /* 10px от нижней границы .relative-container */ right: 10px; /* 10px от правой границы .relative-container */ }Вывод: Используйте relative, когда вам нужно слегка сдвинуть элемент, не нарушая общий поток документа. Используйте absolute, когда вам требуется точный контроль над позицией элемента внутри другого элемента, выступающего в роли контейнера.