Detailed explanation of the relationship between the two, need to cooperate with examples, please first look at the example:
The following is a reference fragment:
<title>Div + CSS Example, wayhome ' s Blog</title>
Position:absolute;
top:5px;
right:20px;
Position:absolute;
left:20px;
bottom:10px;
Position:absolute;
top:5px;
left:5px;
position:relative;
left:150px;
width:300px; height:50px;
1
2
3
4
5
padding:20px 0 0 20px;
Position Absolute;
Position relative;
left:200px;
width:300px;
height:300px;
Position:absolute;
top:20px;
right:20px;
Position:absolute;
bottom:20px;
left:20px;
Absolute: Absolute positioning, CSS notation "position:absolute; ", it is positioned in two cases, as follows:
1. There is no setting for Top, right, Bottom or left, by default the parent's "content area origin" is the original point, the above example red section (parent yellow area has Padding attribute, "coordinate origin" and "content area origin" is different).
2. There are settings for Top, right, Bottom and left, and here are two different situations:
(1). The parent does not have a position attribute, the upper left corner of the browser (that is, Body) is positioned as "coordinate origin", the position is determined by the top, right, Bottom and left properties, the example green section above.
(2). The parent has the position attribute, the parent's "coordinate origin" is the original point, the above example is the light blue section.
Relative: relative positioning, CSS notation "position:relative; ", referring to the parent's" content area origin "as the original point, no parent to the Body's" content area origin "as the original point, the position is determined by the Top, right, Bottom, and left properties, and has the role of" open or occupy height ", the example orange section above.
Through the above examples and explanations, I believe that skilled use of absolute and relative is not a very difficult thing, we are surrounded by a lot of absolute and relative good examples, such as "NetEase 163 free Mail" Home (http://mail.163.com ), there is a lot of use.
Example code is passed in IE5.5, IE6, FF1.5, and OPERA9 tests.
