Negative top and left margins move the element up and left while negative right and bottom margins make following siblings move left and up.
This technique allows to center a absolutely positioned element. The left outer edge of the box is first aligned with the center of the positioning block (
left:50%;), then the negative margin (which is half the width of the box) aligns the box in the center of the positioning block.
Here the positioning block is the viewport, hence it is the viewport’s width that is used to calculate the ‘width’, ‘left’, and ‘margin’ of the yellow box.
Style the wrapper of these boxes (
Style the yellow box with: