Thursday, November 22, 2012

CSS Position property

          To set the element at any position in browser we can use “position” property. We have already studied background-property in “Background properties”. This property sets the element at any given coordinates in the browser. Along with “position” property use the properties “Top, left, bottom, right ” and z-index. This property has following values:
o   static
This is the default value for this property.  With this value element is not positioned but appears in the flow of the element. The properties “top, left, bottom, right” and z-index are ignored by the browser.  You need to set position to static only if you need override the position set by previous element.

o   Relative
The position when set to relative will move the element from the position where it would have appeared in the normal flow of the document. With this property you can use the “top, left, bottom, right” properties. If in your document a image appears in the header of the page when position property is set to static and you change its position to relative with “left:50px”, “top:10px” . Then the image would move left by 50px and down by 10px.

o   Absolute
The element with property absolute will be positioned considering the “top, left”  corner of the parent element as origin. When the position:absolute is set then rest of the document flow will not impact the position of the element.
Following is the simple example for the position properties “static, relative,  absolute” . For relative elements is moved 10px top, 10px left and absolute the elements is moved 10px top, 10px right.

Div 1
Div 2