Positioning in CSS
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.The position property defines how an element will be positioned on a page - relative to it's position in the XHTML or relative to the top left corner of the browser window.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
position Syntax:
position: static | relative | absolute | fixed | inherit
Static Position-HTML elements are positioned static by default. A normal box, subject to the normal flow.Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Position - An element with fixed position is positioned relative to the browser window.It will not move even if the window is scrolled.The box is placed in an absolute location relative to some reference point.
inherit Position-The element should have the same position value as the parent element.
relative Position-Box is in normal flow, offset relative to its normal position.A relative positioned element is positioned relative to its normal position.
absolute position-The box is placed in an absolute location relative to the container block.An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
position Browser Support:
Netscape 4, 6, 7
Mozilla 1
Firefox 1
Internet Explorer 4, 5, 6
Opera 3, 4, 5, 6, 7, 8
Safari 1