Praktičan zadatak na CSS poziciji: postoje tri elementa (plavi, zeleni, crveni) sa zadanim stilovima. Kako će se promeniti pozicija plavog elementa pri dodavanju različitih vrednosti za position i pomeranja (relative, left/top, absolute, transform na roditelju)

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