CSS Positioning Properties

Now all the designs to be done entirely in CSS that previously required the use of javascript or HTML image maps . Not only is it easier to code, but it also loads much quicker!

Position Relative

The position of the HTML element changes relative to where it normally appears using relative positioning .
We could use relative positioning to move it a bit to the right and down a couple of pixels,if we had a header that appears at the top of our page, .

CSS Code

h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}

Using only two (left and top),you probably noticed that you define the four possible directions (left, right, up, and down) . Here's a quick reference when moving HTML elements in CSS.

Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

Position Absolute

You define the exact pixel value where the specified HTML element will appear using absolute positioning.
So be sure you are measuring from the top-left of the browser's viewable area.
Note:Firefox does not currently interpret absolute positioning correctly. However both IE 6.0+ and Opera 8.0+ do.

CSS Code

h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}

The following example demonstrate how to set the shape of an element

CSS Code

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>

</html>

The follwing table describe the Positioning Properties:

Property	Description	values
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length
clip	Sets the shape of an element .The element is clipped into this shape, and displayed	shape auto
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length
top	Sets how far the top edge of an element is to the left/right of the right edge of the parent element	auto % length
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom % length
z-index	Sets the stack order of an element	auto number