Div CSS Absolute and Relative difference Summary _ experience Exchange

Source: Internet
Author: User
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;&LT;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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.