To explain the relationship between the two, need to cooperate with examples, please see the example first:
The following is a reference fragment:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>div + CSS Example, wayhome ' s blog</title>
<style type= "Text/css" >
<!--
body,td,th{font-family:verdana;font-size:9px;}
-->
</style><body>
<div style= "Position:absolute; top:5px; right:20px; width:200px; height:180px; Background: #00FF00; " >
Position:absolute;<br/>
Top:5px;<br/>
Right:20px;<br/>
<div style= "Position:absolute; left:20px; bottom:10px; width:100px; height:100px; Background: #00FFFF; " >
Position:absolute;<br/>
Left:20px;<br/>
Bottom:10px;<br/>
</div>
</div>
<div style= "Position:absolute; top:5px; left:5px; width:100px; height:100px; Background: #00FF00; " >
Position:absolute;<br/>
Top:5px;<br/>
Left:5px;<br/>
</div>
<div style= "position:relative; left:150px; width:300px; height:50px; Background: #FF9933; " >
Position:relative;<br/>
Left:150px;<br/>
<br/>
width:300px; height:50px; <br/>
</div>
<div style= "Text-align:center; Background: #ccc; " >
<div style= "margin:0 auto; width:600px; Background: #FF66CC; Text-align:left; " >
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<div style= "padding:20px 0 0 20px; Background: #FFFF00; " >
padding:20px 0 0 20px;
<div style= "Position:absolute; width:100px; height:100px; Background: #FF0000; " >position: <span style= "color: #fff; ">absolute</span>;</div>
<div style= "position:relative; left:200px; width:500px; height:300px; Background: #FF9933; " >
Position: <span style= "Color:blue;" >relative</span>;<br/>
Left:200px;<br/>
<br/>
Width:300px;<br/>
Height:300px;<br/>
<div style= "Position:absolute; top:20px; right:20px; width:100px; height:100px; Background: #00FFFF; " >
Position:absolute;<br/>
Top:20px;<br/>
RIGHT:20PX;<BR/></div>
<div style= "Position:absolute; bottom:20px; left:20px; width:100px; height:100px; Background: #00FFFF; " >
Position:absolute;<br/>
Bottom:20px;<br/>
Left:20px;<br/>
</div>
</div>
</div>
</div>
</div>
</body>
Absolute: Absolute positioning, CSS writing "Position:absolute;" ", it's positioned in two different situations, as follows:
1. Do not set top, right, Bottom, left, the default based on the parent "content area original point" as the original point, the above example red Section (the parent yellow area has the Padding attribute, "coordinate original point" and "content area original point" is not the same).
2. There are set top, right, Bottom and left, here are divided into two kinds of situations:
(1). The parent is not position property, the upper left corner of the browser (that is, the body) for the "coordinate original point" for positioning, position by top, right, Bottom, left property, the above example green part.
(2). The parent has the position attribute, and the parent's "coordinate original point" is the original point, the example light blue section above.
Relative: relative positioning, CSS writing "position:relative;" ", reference to the parent's" content area origin "as the original point, no parent is the body's" content area original point "as the original point, the position by the top, right, Bottom, left property, and there is" open or occupy the height "of the role, above the example orange part.
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, Opera9 tests.
