TUTORIAL: CSS Positioning

[petermoses]

Hello all,

Several people have been asking about the different types of css positioning...how to use them, is one better than the other, troubleshooting alignment, etc.

I figured it would help if I posted a thread covering some basics. All this information I have gathered through various websites and forums. I am just posting what I have learned through the years. The sole purpose of this thread is to show others how these techniques are implemented. So, without further adieu, here it is:

HTML Code:

<div class="rel">
<h2>#1</h2>
<p>relative position</p>
<div class="abs">
<h2>#3</h2>
<p>absolute position</p>
</div>
<div class="stat">
<h2>#2</h2>
<p>static position</p>
</div>
</div>
<div class="fix">
<h2>#4</h2>
<p>fixed position</p>
</div>

Code:

body, div, h2, p {
font-family:Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}
h2 {
font-size:18pt;
}
p {
text-transform:capitalize;
}
div.rel, div.abs, div.fix, div.stat {
font-size:10pt;
border:solid 1px #333;
padding:20px;
margin:0;
}
div.rel {
position:relative;
width:500px;
height:500px;
margin:50px auto;
background-color:#030;
}
div.abs {
position:absolute;
bottom:-25px;
right:-25px;
width:150px;
height:50px;
background-color:#093;
}
div.fix {
position:fixed;
right:5px;
bottom:5px;
width:75px;
height:300px;
background-color:#9C0;
}
div.stat {
border:solid 1px #fff;
background-color:#063;
height:70px;
margin-top:20px;
}

Static Position
The default setting for an element. It will follow the normal html flow of the page. Element cannot be adjusted with the "top, right, bottom, and left" values.

Relative Position
Element is positioned in the normal html flow of the page and can be adjusted using the "top, right, bottom, and left" values.

Absolute Position
Element is removed from the normal html flow. Position is adjusted through the "top, right, bottom, and left" values and is based on the first parent container that has a position set to a value other that static.

Fixed Position
Element is removed from normal html flow. Position is adjusted through the "top, right, bottom, and left" values. These values are based on the html tag (browser window).

Any questions/comments or other recommendations feel free to chime in [/php][/code]

[netshet]

position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

Code:

#div-1 {
position:static;
}

[awsrumana]

Thanks for sharing this information with us...