The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
The yellow box is shifted to the left which makes the pink box expand. This would not happen if the pink box was offset from the left edge of the containing box (i.e. styled with
left properties offset the box from its position in the flow while margins play a role in the position of the following elements in the flow.
Style the yellow box with: