Without any modifications to the positioning, this will just look like
That’s the normal, default flow.
If you set
position: absolute on the third one, it will take it out of the normal document flow.
ie if those three lines are all the HTML that is on the page, then the third line will be moved to the top left of the browser window and over the top of the other ones. You are saying, with
position: absolute, “don’t let this element sit in its normal position, ignore the order the HTML is written in and put it exactly where I say it should be in the window”.
Relative positioning is normally used in combination with absolute positioning. Say the HTML looks like this instead:
If you set
position: absolute on line 3, it will move to the top of the browser window, over the header. But if you set
position: relative on the
<main> tag as well, instead of moving to the top of the browser window, line 3 will just move to the top of
<main> - instead of being positioned absolutely in the browser window, it would now be positioned absolutely relative to main. And relatively positioned elements stay in the normal document flow, so the order of
main stays exactly the same