Позиционирование

position

По-умолчанию: relative

Определяет метод позиционирования блока.

relative  — за исходную позицию принимается его естественное положение. Свойства top, right, bottom и left определяют смещение относительно исходной позиции.

absolute — за исходную позицию принимается положение относительно границ контейнера. Свойства top, right, bottom и left определяют смещение относительно исходной позиции и возможно размеры блока.

top, right, bottom, left: number | percent

Определяют смещение относительно исходной позиции. Как абсолютное значение в пикселях или в процентах по отношению к размерам контейнера.

При position = 'relative' исходной позицией является естественное положение блока. Тогда смещение задаётся при помощи одной или двух координат: left или right по горизотали и top или bottom по вертикали. Свойство left имеет приотитет над right если заданы оба, и top над bottom.

В случае position = 'absolute' за исходную позицию принимается положение относительно границ контейнера. Свойства top, right, bottom и left определяют смещение относительно исходной позиции. Если left задан в паре с right, эти свойства определяют размер блока по горизонтали, а свойства top в паре с bottom — по вертикали.

В примере с position = 'relative', естественной позицией блока вустыпает место сразу после текста, за которым он следует. Тогда свойства top, right, bottom и left определяют смещение относительно этой естественной позиции.