CSS 2.1 Reference: position Property

The position property is used to specify the method by which the element will be laid out.

This property is specified by using a keyword according to the syntax shown above. If relative, absolute, or fixed is specified then the top, right, bottom, and left properties can be used for positioning. If static is specified then positioning is automatic according to the normal flow.

CSS Example: The position properties are set using 4 different keyword values

  #tst1 {position: static;}
  #tst2 {position: relative; top: 20px; left: 50px;}
  #tst3 {position: absolute; top: 30px; left: 20px;}
  #tst4 {position: fixed; top: 325px; left: 60px;}

• static - The element's box is laid out automatically according to the normal flow.
• relative - The position of the element's box is relative to its normal flow position. It is offset from its normal flow position by using the top, right, bottom, and left properties. NOTE: The element's box is treated as though it has no offset when the position of the following box is determined.
• absolute - The element's box is set to an absolute position with respect to its containing block. Its containing block is the nearest ancestor element that has its position property set to relative, absolute, or fixed. The top, right, bottom, and left properties are used to set the offset of the element's box with respect to its containing block. NOTE: The element's box is treated as though it does not exist when the position of later sibling element boxes are determined.
• fixed - The position of the element's box is offset from its browser window by using the top, right, bottom, and left properties. The element's box will not move when the browser window is scrolled. NOTE: The element's box is treated as though it does not exist when the position of later sibling element boxes are determined. If the fixed value is being used to style print media, then the element's box will be rendered on every page.
• inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.