The following is a reference clip:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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: #00 FFFF;">
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: #00 FFFF;">
Position: absolute; <br/>
Top: 20px; <br/>
Right: 20px; <br/> </div>
<Div style = "position: absolute; bottom: 20px; left: 20px; width: 100px; Height: 100px; Background: #00 FFFF;">
Position: absolute; <br/>
Bottom: 20px; <br/>
Left: 20px; <br/>
</Div>
</Div>
</Div>
</Div>
</Div>
</Body>
</Html>
Absolute: absolute positioning. CSS is written as "position: absolute;". Its positioning is divided into two situations:
1. top, right, bottom, and left are not set. By default, the "original vertices in the content area" of the parent level is the original vertices. The red vertices in the preceding example (the parent level yellow area has the padding attribute, the "Original Coordinate point" is different from the "original coordinate point" in the content area ).
2. If top, right, bottom, and left are set, the following two situations are involved:
(1 ). the parent class does not have the position attribute. In the browser, the upper left corner (that is, the body) is the "original coordinate point" for positioning. The position is determined by the top, right, bottom, and left attributes. The green section in the preceding example is used.
(2) The parent level has the position attribute, and the "original coordinate point" of the parent level is the original point. The light blue section in the example above.
Relative: relative positioning. CSS is written as "position: relative;". The original point is referred to as the "original point of content area" of the parent level. If there is no parent level, the "original point of content area" of the body is the original point, the position is determined by the top, right, bottom, and left attributes, and has the effect of "opening up or occupying the height". The orange part of the example above.
Through the examples and explanations above, I believe that it is not very difficult to use absolute and relative skillfully. We have many good examples of absolute and relative, for example, "Netease 163 free mail" Home Page (http://mail.163.com), which has a lot of use.
ExampleCodeIe5.5, IE6, ff1.5, and opera9 passed the test.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
