Hoe zal de positie van het blauwe element veranderen bij het toevoegen van verschillende waarden voor position en verschuivingen (relatief, left/top, absoluut, transform op de ouder) in een praktische CSS position taak: er zijn drie elementen (blauw, groen, rood) met vastgestelde stijlen.

Рассмотрим, как изменится положение синего элемента при разных значениях CSS-свойства position и смещениях:

• position: static (по умолчанию) — элемент располагается в нормальном потоке документа. Свойства top, left не влияют.

• position: relative + left/top — синий элемент остаётся на своём месте в потоке, но визуально смещается относительно исходного положения на заданные значения left и top. При этом пространство под элемент сохраняется.

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

• transform на родителе — если у родителя задано CSS-свойство transform (например, transform: translate(...)), то для абсолютного позиционированного потомка родитель становится контекстом позиционирования. Это влияет на расчёт смещений left, top у абсолютного элемента.

Таким образом, добавление position: relative и смещений сдвинет синий элемент относительно его места, но не изменит поток. position: absolute выведет элемент из потока и позволит позиционировать его относительно ближайшего позиционированного предка. Наличие transform у родителя создаёт новый контекст для абсолютного позиционирования.