CSS POSITIONING

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.

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 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 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. 

ABSOLUTE POSITIONING
Surely one of the most 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?

FIXED POSITIONING