relative positioning
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.
Although the box is styled with both left
and right
values, right
is ignored.
In a rtl
context it would be the opposite, it is right
that would prevail.
Style the yellow box with:
margin-left: 33%;