Cum se va modifica poziția elementului albastru la adăugarea diferitelor valori de position și deplasări (relative, left/top, absolute, transform pe părinte) într-o sarcină practică de CSS position: există trei elemente (albastru, verde, roșu) cu stiluri definite.

Рассмотрим, как изменится положение синего элемента при разных значениях 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 у родителя создаёт новый контекст для абсолютного позиционирования.