Cascading Style Sheets Position elements

Adding elements to a Web page without specific coordinates will result in stacking of elements against the left side of previous element.
CSS provides two important positioning tools: floating and positioned.
First we look into methods to modify the position property in a CSS selector. Available options are:
static, relative, absolute, fixed, and inherit.

Static position
Static is the default positioning – result will be similar to what if no position is specified. Static elements will flow and stack on the left side.

Relative position
Relative positioning is like static, but you can use top and left properties to modify the default flow location, relative to other objects.

Syntax
selector { position: relative; coordinates of position of direction left, right, top bottom as required;
Example
p.left{ position: relative; left:-35px;}
This will result in a paragraph which is 35px left to default paragraph position

coordinates can be defined as (px (pixels), pt (points), pc (picas), mm (millimeters), cm (centimeters), in (inches), em), auto (browser controlled) or % value.

Absolute position
Absolute positioning detaches the element from other objects — its position is not relative to them.

Syntax
selector { position: absolute; coordinates of position of direction left, right, top bottom as required;
Example
h2.abs { position: absolute; left:80px; top:70px; }

Fixed position
Fixed position will cause an element to remain in their location in the browser, even if the user scrolls the browser.

Syntax
selector { position: fixed; coordinates of position of direction left, right, top bottom as required;
Example
p.fixed { position: fixed; top:100px; right:80px; }

Stacking Elements on Top of Each Other with the Z-Axis
In addition to left / right or top / bottom coordinates, a third axis, known as the z-axis is also provided by CSS. By z axis one can specify which object is on top of other. A higher z value causes an object to appear on top.

Syntax
selector { position: absolute; coordinates of position of direction left, right, top bottom as required; z-axis: value;}
Example
p { position: absolute; left:0px; top:0px; z-index:-1 }

Floating
CSS allows an element to float i.e. more to desired location. Available options are: left, right, both, inherit. So giving float to an element with left or right will cause that element to move to as much possible in desired direction. With float one can flow or wrap text around an image.

Example
<h3><img src=”CSS.jpg” style=”float: left; width: 50px; height: 50px;”> how float works</h3>

Turning off  Float – Using Clear
Elements continue to float around the element. To detach an element which will normally float can be done by using clear property. The clear property specifies which sides of an element other floating elements are not allowed. Available option are left, right, both , inherit