1 person found this helpful
Because you're using absolutely positioned elements. Please read about positioning:
So a quick recap:
Static: default positioning, follows the normal flow of the document. Generally you should always use this (which means you actually never have to declare it since it's the default positioning of all elements).
Relative: element remains in the flow, but can now take left/right/top/bottom CSS attributes to position it relative to its normal position
Absolute: removes element from the normal document flow. Positioned absolutely on the page (or from it's parent element if that parent element has a position declared (i.e. not static) and a defined width).
Fixed: element removed from document flow, "fixed" in a position relative to the document - often used on navbars or footers that you want to always show up in a set area on the page.
Inherit: position does not cascade so if you want a child element to inherit it's parent's positioning, use inherit.
Then to add to this complexity there are floats: float: left, float: right. But that's another lesson.