Элемент, у которого свойство position имеет относительное значение, сначала располагается как статический элемент. Затем визуализированный блок смещается по вертикали (в соответствии со свойством top или bottom) и / или по горизонтали (согласно свойству left или right).
Свойства top , right , bottom и left могут использоваться для указания того, на сколько будет смещено визуализированное поле. Положительное значение означает, что поле будет смещено от этой позиции к противоположной стороне. Например, left значение 20 пикселей смещает прямоугольник на 20 пикселей вправо от его исходного положения. Применение отрицательного значения к противоположной стороне приведет к тому же эффекту: правильное значение -20px даст тот же результат, что и левое значение 20px. Начальное значение для этих свойств — auto, что делает вычисленное значение 0 (ноль), то есть сдвиг не происходит.
Очевидно, что бессмысленно указывать как left и right для одного и того же элемента, потому что позиция будет чрезмерно ограничена. Если направление содержимого слева направо, используется left значение, а right будет игнорироваться. В направлении справа налево right значение «выигрывает». Если указаны и top и bottom , будет использоваться top , а bottom будет игнорироваться.
Так как только отображаемое поле перемещается, когда мы относительно позиционируем элемент, эта схема позиционирования бесполезна для размещения столбцов контента. Относительное позиционирование обычно используется, когда нам нужно сместить прямоугольник на несколько пикселей или около того, хотя это также может быть полезно в сочетании с отрицательными полями для плавающих элементов для некоторых более сложных конструкций.
Контролируйте свои содержащие блоки
Один побочный эффект относительного позиционирования весьма удобен: относительно позиционированный элемент «позиционируется», что означает, что он становится сдерживающим блоком для любых абсолютно позиционированных потомков. Это дает нам простой в использовании инструмент для контроля положения наших содержащих блоков: просто установите положение относительно, не перемещая блок вообще.