So far you have positioned elements on the page vertically and horizontally. Look back at the first pair of DIVs on the page about absolute positioning. Note that the blue DIV is "inside" the green one but is still displayed. It appears to be "on top" of the larger green DIV. This is because each element on the page gets a position in a third dimension known as z-index.
By default a later element will appear on top of earlier ones. You can manually set the z-index:
#contained {
z-index:1;
}
Fiddle with the DIVs in positioning.html and give them various z-index values. The higher up values appear on top of lower ones.
One complication is that the z-index for a statically positioned element is affected by the element it is in. If an element is inside another then the z-index is for display of items within that element and does not affect anything outside of the parent element.
There is an exercise to explain that if you want to. You could just try to remember to come back to it the first time you have trouble with z-index!Z-index exercise
