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.

ABSOLUTE POSITIONING

FIXED POSITIONING