Quelle sera la modification de la position de l'élément bleu lors de l'ajout de différentes valeurs de position et de décalages (relative, left/top, absolute, transform sur le parent) dans un exercice pratique sur la propriété CSS position : il y a trois éléments (bleu, vert, rouge) avec des styles donnés.

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