Особенности использования абсолютно позиционированных элементов

При использовании абсолютного позиционирования элементов на странице есть один принцип, который поможет вам разобраться в их использовании.

Когда у селектора задано свойство postition:absolute, страница рассматривается как XY-сетка и по умолчанию точка 0,0 находится в верхнем левом углу экрана. И если мы абсолютно позиционированный элемент смещаем на 30 пикселей слева и на 70 пикселей сверху, то смещение начинается от верхнего левого угла независимо от того, где этот элемент расположен в HTML разметке. Это является излишним функционалом, так как обычно требуется располагать элемент относительно какого-нибудь родительского контейнера. Чтобы сделать это необходимо просто добавить position: relative контейнеру относительно которого вы хотите позиционировать вложенный элемент. После этого точка 0,0 на XY-сетке будет находиться в вершине контейнера в который помещен абсолютно позиционированный элемент.

На рисунке ниже показано, как красный контейнер позиционируется на странице в зависимости от того, есть ли у синего (родительского) контейнера position: relative или нет.