INTRODUCTION :

Positioning in CSS is no laughing matter for the novice or experienced designer. More often than not this can be one of the toughest stumbling blocks when learning CSS. To start things off I would like to point to an article by Noah Stokes which was published by A List Apart November 16,2010. The article is titled Positioning 101.  All participants and followers becoming familiar with positioning should begin their studies by reading Noah's article before moving onto the sections below.

 

 
STATIC POSITIONING *default

Just as Noah states in his article, think of static positioned elements in the documents normal flow as wooden blocks that stack upon one another. Each block added makes the tower taller. If a block is removed the block below replaces the previous blocks space.

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/grayghostvisuals/2X3wE/5/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

RELATIVE POSITIONING

HTML relatively positioned elements ( or as we CSS'ers like to call 'building blocks' ) behave much like static positioned elements -with one exception. They can now move. When an element has a relative position it now has a coordinate system from it's current location in the nomral flow of the document. Moving this element from it's position allows for the space left behind not to collapse on itself. This hinders other elements above or below from moving in on it's territory. Relative position also enables a few other tricks up it's sleeve. We can now give a z-index value which will allow us to have a photoshop like layer palette with our elements.


ABSOLUTE POSITIONING

Surely one of the trickiest positioning theories in CSS to digest. When an element is absolutely positioned it is moved entirely out of the document's normal flow. This means the space it has sudenly moved from collapses, but where does it go? When an element is absolutely positioned it moves to the closest positioned ancestor. This means if an element above is relatively positioned then the absolute positioned element below will only go as far as the relatively positioned element above it. If no elements have relative, fixed or absolute position then the closest ancestor to the absolute positioned element will be the HTML element which is the top of our document. Absolute can also accept z-index values for the photoshop layers we discussed with relative position.

 

FIXED POSITIONING

An element with position:fixed shares all the rules of an absolutely positioned element, except that the viewport positions the fixed element, as opposed to any parent element. The fixed element does not scroll with the viewport and will stay directly where you tell it to stay(sit booboo sit, good element). Additionally, a fixed element does not scroll with the document. It stays fixed and can also accept a z index that we have seen with other positioning properties.