Positioning
This means moving HTML elements relative to their normal position in the page layout flow, or even removing them entirely from the page layout flow.
This example is just to briefly introduce the concept, not explain how it all works.
Those details are in the Positioning Overview PDF provided with this lesson.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Since you are used to everything being in the page layout flow (except background images) all these blocks stacked on top of each other seem funky.
The red block is the same size as the others, but it's partially off the page. That's funky.
Even funkier yet, some of the blocks are on top of the text, while others are under the text.
For further funkyness, scroll the page and see the grey block is on top of some text, but under this text!
Margins Become Irrelevant
When an element is positioned, it is freed from its would-be place in the normal page layout flow.
Thus, the margins of a moved block don't effect anything since the concept of adjacency no longer applies.