Как работает позиционирование элементов с использованием свойства position:absolute?

При использовании свойства position:absolute элемент удаляется из основного потока документа и перестаёт влиять на положение окружающих элементов и на размер родителя. doka.guide developer.mozilla.org Можно представить, что элемент уходит на слой выше и перестаёт взаимодействовать со всеми элементами, кроме своих потомков. doka.guide

Положение элемента регулируется с помощью свойств left, right, top, bottom или inset. doka.guide Некоторые особенности такого позиционирования:

• Координаты для нового местоположения отсчитываются от ближайшего позиционированного родителя. learn.javascript.ru Это родитель с позиционированием, отличным от static. learn.javascript.ru Если такого родителя нет, то относительно документа. learn.javascript.ru
• Ширина элемента, если она не задана явно, определяется шириной содержимого плюс значения padding, border и margin. webref.ru
• Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. webref.ru Если left и right противоречат друг другу, то значение right игнорируется. webref.ru
• Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. webref.ru То же относится и к свойству top, только элемент уйдёт за верхний край. webref.ru
• Элемент перемещается вместе с документом при его прокрутке. webref.ru
• Абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже. webref.ru