Collapsing Margins
The margins on top and bottom of an element are collapsing. When you have two elements with vertical margent that are stacked, the space in between them is equal to the element with the largest margin. The margins overlap until either the top margin of the bottom element touches the bottom of the border of the top element, or the bottom margin of the top element touches the border of the bottom element.
How to make an element have a position related to another element
The default for absolute position is to be positioned relative to the body. By putting the element inside a div and setting that div position, the child element (position absolute) will be positioned relative to the parent.
Display: none vs. visibility: hidden
When the property display is set to none that elements and the space it took up does not show up on the screen. When the property visibility is set to hidden that element does not show up on the screen but the space it take up is still there, you just can’t see the contents.