Can someone explain like I'm 5 how relative vs absolute positioning works?
This sentence in particular confuses me:
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.
This as well throws a wrench in the gears in my head.
If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn’t move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.
It is a confusing wording.
Static positioning is the default placement inside its proper block. It depends on the container and placement in the program. Easy.
Relative positioning means you are moving the element up or down by the number pixels you ask it to. Like an old treasure hunt: “margin-top: 10px” is equivalent to “move the element down 10 paces.” You begin at the static positioning and take the number of pixels up, down, left or right specified by the margins. Moving the element not affect any of the other elements on the page, but its original placement might. For example, The text of a paragraph element is like a pair of shoes in a shoebox (The shoebox represents the space allotted). In this analogy, the shoeboxes never move. Paragraph elements always get a newline, so the original structure of the text looks like stacked shoe boxes. Relative positioning moves the shoes (The visible text), but leaves the boxes. Thus the starting positions of the other elements are unaffected, as their box/starting place is unaffected.
Try this (and mess with moving the margins)
<p id = "super">super<p id="outer">middle<p id="inner">inside</p></p></p> <!--all of these are set to relative -->
Elements with “position:absolute;” do NOT get shoe boxes, and are just shoes. This means their existence does not effect the starting point of other elements (These elements do not force other elements to start lower). Absolute positioning, moving like a treasure hunt, moves left or right the number of pixels stated. ANOTHER DIFFERENCE: The starting point of the treasure map is different that it is for absolute positioning. The starting point is the most immediate parent element not set to static. Do an experiment on Lesson 19.
<p id = "super">super<p id="outer">middle<p id="inner">inside</p></p></p> <!--set inner to absolute, middle to static, and outer to relative or absolute -->
See how when you move the “inner” element, it no longer starts aligned with the “middle” element. It starts where the first non static parent is, which is “super.”
Hope this helps. It is easier to see the difference with paragraph elements that div tags.