Cascading Stylesheets Guide
Positioning Elements

CSS allows you to position elements exactly where you want them. If this is overdone it can make your HTML almost impossible to read. On a small scale this ability can help you to create some impresive effects.

Before specifying the position of an element you must state the type of positioning control to use. The choice is between relative, where the element is positioned relative to its parent or absolute where the element is positioned relative to the page

position: relative;
position: absolute;

The next values that you specify are the distances from the top of the page or element and from the left.

left: 200px;
top: 50px;

You can also control the z-index of the element to control how positioned elements overlap. In the example below the red box overlaps the yellow box because it has a higher z-index. View the source code for this page to see how these elements are positioned.