This is the navigation 'column', which runs down the left of the page.
This is the main content block. This page does not use any HTML tags besides the "div" tag and CSS. Notice that this block is positioned above the layer to the left.
And yet another layer goes above the main content. We achieve this by using the "z-index" property in CSS. This box is at z-index 2, so it's on top of other layers with lower numbers.
(Notice the tasteful border.)
The quick brown fox jumped over the lazy dog.
Make sure you view the source of this page to properly understand what's going on here.
This div is at z-index 1. Try resizing this window by pulling the bottom right-hand corner. The layers that are positioned in terms of "right" and "bottom" will move around as the page sides get closer to them. What happens when it gets close to another div with the same z-index? (Tricky. View source for the answer.) What about divs that don't have ANY z-index specified? Same story.
This div's CSS z-index is 1, so it's UNDER the yellow box, but OVER the orange box, because the orange box has no z-index specified (so, it defaults to 0).
And here's some words. This text comes last in the code, but appears at the top, because there's 'nothing' above it.
In other words, everything else on the page had a CSS directive to tell it where to appear,
but this text doesn't, so it appears first.