About positioning, i assume you figured out padding?
Now, we have 4 different positions:
static (which is default)
relative
absolute
fixed
lets start with static, you can push static elements around with margin. pretty simple. It is getting interesting when use the 3 remaining positions, because besides margin, we then also have:
left, right, bottom, top
which we can use to position our elements, lets start with absolute, from the exercise:
The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>
this explanation is true if we use left, right, bottom and top. Not when using margin, when using margin, we just push the element around. as you can see in this bin we have a static div (#outer) and a absolute div (#inner) and as you can see, #inner position relative to html, because parent (#outer) is static, if you where to change #outer to relative, #inner would position relative to #outer.
Lets quickly cover position: fixed; it works pretty much like absolute, except when you scroll it stays exactly where it is (unlike position: absolute), it is "glued" to the screen if you like. For the rest it is the same.
Now, lets cover position: relative; from the exercise:
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
which again is true if you left, top, bottom and right. Before i continue, you need to realize that left, top, bottom and right do not work on static elements. Now, look at this bin, as you can see, margin is pushing #one and #two down. however, if you where to change margin-top: 50px; to top: 50px; #one would be moved 50px relative to where it would have been, and not push down #two.
now, the final bin, as you can see, margin-bottom is pushing the red block (#two) down. if you where to remove margin-bottom: 30px; you will see that #two shifts up. If then you where to add bottom: 30px; you will see #one shifting up, so there is a big difference. margin-bottom will push the element below 30px down, where bottom: 30px will offset #one by 30px from where it was
There you go, hope this helps understanding positioning. feel free to ask if you have any questions
