Static positioning is always positioned according to the normal flow of the page, i.e. it is not effected by top, bottom, left or right properties.
Relative positioning is “relative” to an element's normal position. This is often used to create a container for absolute positioned elements. Content can move and overlap other elements but the reserved space for the element is preserved in the normal flow. Notice how this content overflows and the element is relative to its normal position in the flow after the static element above.
Absolute positioning is relative to the html document or to the first parent element with a position other than static (such a parent element with relative positioning). This type of positioning is removed from the natural flow and can overlap other elements.
Notice if you scroll the page up or down, this element stays put relative to the html document but the fixed element stays 'fixed' to the browser window.
Fixed positioning stays “fixed” relative to the browser window and is removed from normal flow. Therefore a fixed positioning will not move even if you scroll the page and will overlap other elements.
Try it your self - resize your browser window and see what happens!
This happens when one or more elements are removed from the natural flow (such as fixed, absolute positioning and content that is larger than its relative positioning).
The order of how overlapping elements stack on top of one another is controlled by a z-index which is also specified in the CSS.
The element with the greater z-index value is always in front. For example, this overlapping element (which happens to be fixed) has a z-index of 1 while the static example on this page has an z-index of 0.