Kaz on Commerce!

Relative is a misnomer and does not mean that it is positioned relative to something else. Position:Relative makes the outer div a candidate as a reference point for the Absolute positioning of the things inside of it. There needs to be a frame of reference for Absolute position to work.

So in short Position=Relative means this is a reference point for the elements that are absolute and contained within it. Another way to word this is Relative positioning isn’t for positioning things. It’s to create a reference point.

Sample:
div#outer {
position: relative;
width: 750px;
height: 500px;
margin: 15px auto;
background-color: #369;
border: solid 1px black;
}

div#first {
position: absolute;
top: 0;
left: 0;
background-color: #ccf;
float: left;
width: 220px;
padding: 15px;
}

div#second {
position: absolute;
top: 0;
left: 250px;
background-color: #fcc;
width: 220px;
padding: 15px;
}

div#third {
position: absolute;
top: 0;
left: 500px;
background-color: #cff;
width: 220px;
padding: 15px;
}

(note: Although the above technique is the most commonly used way of position:relative, it can also be used to position something on the screen in a different place than where it actually belongs to the document while laying out the rest of the document as if that object were right where it belonged and had not been positioned. In other words, a relative positioned element is positioned relative to its normal position. This usage is less common.)

Float:Left Technique (Preferred)

While one usage of float property is to have text position around images, the other is to create columns or placing boxes. The advantage of float columns is that it uses the natural size and puts things together without you having to a lot of calculation and when your columns change size, it automatically adjusts.
Float:left ends up stacking things next to each other when used for columns. The only thing you need to worry about is that your outer box is big enough to contain all of the columns that you’re stacking up. This is generally the PREFERRED, because it is easier to manage.

Fixed Positioning Technique
Position:fixed is used to fixate any object in the box model. Occasionally, you will want to affix an element to a certain part of the page, where it stays in place even when you scroll the page. This is when position:fixed comes in handy.

Fixed positioned elements do not appear within the flow of the document and are outside of the flow of the document and relativistic layout such as wrapping. This technique is used when you want an object to stay in place when scrolling.

Sample:

img#fixedBox{
position: fixed;
width: 200px;
top: 5px;
left: 5px;
background-color: #eef;
padding: 15px;
border: 1px solid #669
}