CSS Beginners Guide part 10 - Positioning and Floating elements

CSS position properties are used to positioning the elements, you can use top, right, bottom and left properties to position the elements, these properties only work to positioned elements unless this properties are not work, there are four types of positioning methods by default html elements are take the static position and static positioned elements are not effected to top,  right,  bottom and left properties.

Positining Elements

the other three are fixed positioning this property is used to set the div to fixed position in web page relative to the browser window, relative positioning this element is positioned relative to its static position, the absolute positioning is take the position relative to the first element if there is no first element is set, it take to html tag element.
ex:

<style>

div{

position:fixed; // the div position is fixed in one place

// this bellow code move the div to 20 pixels to its original position

position:relative; 

top:20px;

// absolute position

position:absolute; 

top:20px;

right:50px;

}

</style>

Floating Elements

A floating is pushed the element to the left to right and it is mostly used for images, navigation's, and you can't float top or bottom, you can turn off the floating elements using 'clear:both' property.
ex:

<style>

li{

float:left; // push the element to left side

/////

clear:both; // clear the floating from elements

}

</style>