This example shows four yellow boxes that are positioned with absolute positioning properties, i.e. top, left, right and bottom. They are positioned with respect to the red box which was positioned like this: 
      position: relative;
      top:3px;
      width:95%;
      margin-left: auto;
      margin-right: auto;
      border:3px solid red;
Box to the left 
position: absolute;
left:10px;
top:150px;
width:auto;
Box on top. 
position: absolute;
left:300px;
top:50px;
width:auto;
Box at the bottom 
position: absolute;
left:200px;
bottom:50px;
width:auto;

CSS positioning - Absolute positioning

Absolute positions are REALLY absolute. If you want to avoid to write over a normal text flow, you have to put the normal text flow into another box (which can be relative of course). This has NOT been done here.

Absolute positions are REALLY absolute. If you want to avoid to write over a normal text flow, you have to put the normal text flow into another box (which can be relative of course). This has NOT been done here.

Absolute positions are REALLY absolute. If you want to avoid to write over a normal text flow, you have to put the normal text flow into another box (which can be relative of course). This has NOT been done here.

Les positions absolues sont vraiment absolues. Pour éviter d'écraser un flux de texte normal, il faut aussi le mettre dans une boite (absolue ou relative)

Les positions absolues sont vraiment absolues. Pour éviter d'écraser un flux de texte normal, il faut aussi le mettre dans une boite (absolue ou relative)

Back boxing3.html or forward to 3 Column layout

DKS nov 2003 - XHTML validation - CSS validation