CSS Position Properties

the definition and usage of the Position property:
retrieves or sets how the object is positioned.
Setting this property value to absolute will drag the object out of the normal document flow without considering the layout of the content around it. If others have differentZ-indexThe object of the property already occupies a given position, and they do not affect each other, but cascade at the same place. At this point, the object does not havemargin, but there are stillpaddingand BordersBorder.
to activate the absolute positioning of an object, not only to set this property value to absolute, but also to specify Left, Right,Top,Bottomat least one of the properties. Otherwise, the above properties will use their default auto, which will cause the object to follow normal HTML layout rules and be presented immediately after the previous object.
Setting this property value to relative keeps the object in a normal HTML stream, but offsets it based on the original position of the object itself. Text or objects after the relative (relative) anchor object occupy their own space without overwriting the natural space of the object being anchored. Unlike this, text or an object after an absolute (absolute) anchored object occupies its natural space before the anchored object is dragged off the normal document stream. Placing an absolute (absolute) anchored object outside the viewable area causes the scroll bar to appear. The scroll bar does not appear when you place a relative (relative) anchored object outside the viewable area.
the corresponding script attribute isposition.
syntax structure:

position:static | Relative | Absolute | Fixed

Value:
static: No special positioning, objects follow normal document flow. Top, Right,Bottom, LeftSuch properties are not applied, the default values.
relative: Objects follow normal document flow, but will be based onTop, Right,Bottom, Leftthe properties are offset in the normal document stream.
Absolute: Object out of normal document flow, usingTop, Right,Bottom, LeftThe properties are absolutely positioned. And its cascade throughZ-indexThe property definition.
fixed: Object out of normal document flow, usingTop, Right,Bottom, LeftThe properties are positioned as a reference point for the window, and the object does not scroll when the scroll bar appears. IE6 does not support this property value.
Browser support:
This property is supported by IE browser.
Firefox supports this property.
This property is supported by Google Chrome.
This property is supported by the Opera browser.
Note:IE6 does not support fixed property values.
Inheritance:
there is no inheritance.
Instance Code:
Example One:

<! doctype html>
 
   static is the default positioning value for the object, without any special positioning, so the top property is ignored.  
  example two:    
 
<! doctype html>
 
   first object is positioned relative to itself, and its relative element is its own position. The second object will not be affected by the first object and will remain in its original place.  
  example three:    
 
<! doctype html> 
    
  example four:  
 
<! doctype html> 
The fixed positioning of the postion is always based on the body as an offset reference object.
 
The original address is: CSS Position Properties section.
CSS Position Properties