[CSS Zen Garden] CSS absolute position and relative position explain

Absolute Positioning:
Understanding absolute positioning means understanding the concept of the document flow.
Absolute positioning provides the ability not only to move an element anywhere within the page, but also to remove it from the document flow. An absolutely positioned block no longer influences other elements within the document, and the linear flow continues as if that block doesn't exist.
Relative positioning:
Relative positioning, on the other hand, will not remove an element from the document flow. Based on the element's starting position, a relative position will offset it and then effectively leave a hole behind that other elements must negotiate, as if the element were still positioned there.
A relatively positioned element stays within the document flow; its originating position continues to affect other elements, whereas its new position is ignored by the document flow.
Relative positioning is mostly useful for offsetting elements; an element with a starting position inside a traditional grid may be easily moved outside the grid structure, and elements can be finely adjusted when other positioning options aren't possible. For example, Savarese employs relative positioning to move the dragon at the bottom of the design from a starting point below the white content area, to its final spot at the left of the footer area. Using absolute positioning to position elements near the bottom of a design is much more difficult than positioning them near the top, so this instance of relative positioning makes the adjustment easier.

#extraDiv1 {
background-image:url(Dragon.gif);
background-position:left top;
background-repeat:no-repeat;
height:206px;
left:-360px;
margin:0pt auto;
position:relative;
top:-225px;
width:96px;
}

reference:
http://www.csszengarden.com/?cssfile=070/070.css

[CSS Zen Garden] Position fixed property of CSS2 and IE6

Exploiting the fact that Internet Explorer lacks support for fixed positioning and for child selectors, a series of rules were created to deliver the optimal design to browsers that comply with the rules of CSS, and to deliver the alternate design to Internet Explorer:

body#css-zen-garden>div#extraDiv2 {
background-image: url(bg_face.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 205px;
z-index: 2;
}

The following CSS is applied only in browsers that don't understand the previous rule, in this case Internet Explorer. Because the child selectors imply greater specificity, the former rule takes precedence, but only if the browser understands it.

div#extraDiv2 {
background-image: url(bg_face_ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 600px;
width: 265px;
}

While the fixed-position image scrolls off the page in Internet Explorer 6.0, the design is still attractive and acceptable.

IE7 has supported position fixed property if it’s in standard mode.
reference:
http://www.csszengarden.com/?cssfile=037/037.css

[CSS Zen Garden]The Negative-Margin Solution for Center layout

#container {
background: #ffc;
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}

margin-left is half of #container width, and position of #container must be absolute.

[CSS Zen Garden]Centered Design Using Auto Margins

The preferred way to horizontally center any element is to use the margin property and set left and right values to auto. For this to work with layouts, you'll create a containing div. You must include a width for your containing div:

div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}