Refer to
code is as follows:

<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Strict//EN" "" >
<Meta HTTP - equiv="content-type" content="text/HTML; charset=utf-8" >
<Title> Position
<Style type="text/CSS" >
<! -
body {
the font size: 12px;
margin: 0 auto;
div #demo {
position: relative;
border: 1px solid #000;
margin: 50px;
top: - 50px;
the line - height: 18px;
overflow: hidden;
the clear: both;
height: 1%;
div #sub {
position: absolute;
right: 10px;
top: 10px;
div. The relative {
position: relative;
left: 400px;
top: - 20px;
div. Static, div. Fixed, div. Absolute, div. Relative {
width: 300px;
div. Static {
background - color: #BBB;
position: static;
div. Fixed {
background - color: #ffc0cb;
div. Absolute {
background - color: #b0c4de;
div. The relative {
background - color: #ffe4e1;

} - >
<Div id="demo" >
<Div class="static" >Static: the default value. No special location, objects, follow HTML positioning rules </div>
<Div id="sub" class="absolute" >Absolute: the object from the document flow out, using the left, right, top, bottom properties such as relative to its closest to the parent object of a most positioning set absolute positioning. If there is no such parent object, the object on the basis of the body. And the cascading through z - the index attribute definition </div>
<Div class="fixed" >Fixed: not support. Object orientation to comply with the absolute (absolute). But to abide by some specification </div>
<Div class="relative" >Relative: object not cascade, but will be based on the left, right, top, bottom properties such as offset in the normal flow of document </div>

This concludes the body part