One, the relative positioning (relative)
code is as follows:


<Html>
<Head>
<Title> Position
<Style type="text/CSS" >#div1 {

height: 80px;
width: 400px;
background: red;

} #div2 {
height: 80px;
width: 300px;
background: blue;
position: relative;
left: 20px;
top: - 20px;

} #div3 {
height: 80px;
width: 300px;
background: green;
}
</style>
</head>
<Body>
<Div id="div1" >
</div>
<Div id="div2" ></div>
<Div id="div3" ></div>
</body>
</html>

when set up relative offset, the DIV the position occupied by the original (document flow) will not be the following DIV block away, but where is the empty; After the migration down or to the right content will be hidden, and this difference in absolute positioning, absolute positioning scroll bar will appear. But to the left or right content beyond the line of sight of the current browser, whether relative or feel positioning, beyond the part will be hidden.
2, absolute positioning (absolute)

code is as follows:


<Html>
<Head>
<Title> Position
<Style type="text/CSS" >#div1 {

height: 880px;
width: 400px;
background: red;

} #div2 {
height: 80px;
width: 300px;
background: blue;
position: absolute;
left: - 80px;
bottom: - 50px;

} #div3 {
height: 880px;
width: 300px;
background: green;
}
</style>
</head>
<Body>
<Div id="div1" >
</div>
<Div id="div2" >
</div>
<Div id="div3" >
</div>
</body>
</html>

3, fixed position (fixed)

code is as follows:


<Html>
<Head>
<Title> Fixed
<Style type="text/CSS" >#div1 {

background: green;
width: 100px;
text - align: center;
position: fixed;
right: 20px;
top: 50px;

}. Div2 {
width: 560px;
background: blue;
text text-indent: 2 em;
}
</style>
</head>
<Body>
<Div id="div1" >
<Ul>
<Li> 111 </li>
<Li> 222 </li>
<Li> 333 </li>
</ul>
</div>
<Div class="div2" >
retrieve objects locate mode.

set set the attribute value is absolute object will be dragged off the normal document flow absolute positioning without considering the layout of the content around it. If other objects with different z - the index attribute accounted for the given position, will not influence each other between them, and will be in the same location cascade. This object does not have the patch (margin), but there are still a patch (padding) and borders (border).

in order to activate the object's absolute positioning (absolute), you must specify the left, right, top, bottom properties of at least one, and set the property value is absolute. Otherwise the above properties will use their default auto, this will cause the object follow normal HTML layout rules, immediately after the previous object is presented.
set set the attribute value is relative to keep the object in the normal flow of HTML, but it can be offset according to its previous object. Located in relatively (relative) after the text or object occupies a space of their own and won't be covered natural space positioning objects. In contrast, in absolute positioning (absolute) after the text or object was located in the object being dragged away from the normal flow of the document before its nature of empty rooms. Placed the absolute (absolute) positioning objects outside of the viewing area leads to the scroll bar. And relative (relative) positioning objects placed outside the viewing area, a scroll bar will not appear.

the size of the content will be determined according to layout the size of the object. For example, set the height and the position of a div object attribute, then the content of the div object will determine its width (width).

this attribute for currentStyle object is read-only. Is read/write for other objects.
</div>
<Div class="div2" >
retrieve objects locate mode.

set set the attribute value is absolute object will be dragged off the normal document flow absolute positioning without considering the layout of the content around it. If other objects with different z - the index attribute accounted for the given position, will not influence each other between them, and will be in the same location cascade. This object does not have the patch (margin), but there are still a patch (padding) and borders (border).

in order to activate the object's absolute positioning (absolute), you must specify the left, right, top, bottom properties of at least one, and set the property value is absolute. Otherwise the above properties will use their default auto, this will cause the object follow normal HTML layout rules, immediately after the previous object is presented.
set set the attribute value is relative to keep the object in the normal flow of HTML, but it can be offset according to its previous object. Located in relatively (relative) after the text or object occupies a space of their own and won't be covered natural space positioning objects. In contrast, in absolute positioning (absolute) after the text or object was located in the object being dragged away from the normal flow of the document before its nature of empty rooms. Placed the absolute (absolute) positioning objects outside of the viewing area leads to the scroll bar. And relative (relative) positioning objects placed outside the viewing area, a scroll bar will not appear.

the size of the content will be determined according to layout the size of the object. For example, set the height and the position of a div object attribute, then the content of the div object will determine its width (width).

this attribute for currentStyle object is read-only. Is read/write for other objects.
</div>
<Div class="div2" >
retrieve objects locate mode.

set set the attribute value is absolute object will be dragged off the normal document flow absolute positioning without considering the layout of the content around it. If other objects with different z - the index attribute accounted for the given position, will not influence each other between them, and will be in the same location cascade. This object does not have the patch (margin), but there are still a patch (padding) and borders (border).

in order to activate the object's absolute positioning (absolute), you must specify the left, right, top, bottom properties of at least one, and set the property value is absolute. Otherwise the above properties will use their default auto, this will cause the object follow normal HTML layout rules, immediately after the previous object is presented.
set set the attribute value is relative to keep the object in the normal flow of HTML, but it can be offset according to its previous object. Located in relatively (relative) after the text or object occupies a space of their own and won't be covered natural space positioning objects. In contrast, in absolute positioning (absolute) after the text or object was located in the object being dragged away from the normal flow of the document before its nature of empty rooms. Placed the absolute (absolute) positioning objects outside of the viewing area leads to the scroll bar. And relative (relative) positioning objects placed outside the viewing area, a scroll bar will not appear.

the size of the content will be determined according to layout the size of the object. For example, set the height and the position of a div object attribute, then the content of the div object will determine its width (width).

this attribute for currentStyle object is read-only. Is read/write for other objects.
</div>
</body>
</html>

to summarize:
1, the relative positioning will not lose their position in the document flow, while the absolute positioning and fixed position will lose their original location in the document flow is replaced by the following;
2, in both relative and absolute fixed position, when the offset is beyond and above on the left side of the browser window (or rather than viewing area), beyond the content will be hidden. And beyond and below the right time, relative positioning and fixed positioning part of hides beyond, and absolute positioning scroll bar will appear.
3, relative and absolute and fixed position will float on the top of the normal flow of the document, if cover the normal display of the document flow, you can set the z - index to eliminate.
above is the summary, from the place please correct me.
#0 - #


This concludes the body part