CSS tutorial: how to locate position

Http://www.missyuan.com/thread-395406-1-1.html

 

1. Position: static

The default positioning of all elements is position: static, which means that the element is not located and appears in the document where it should be.

Generally, you do not need to specify position: static unless you want to overwrite the previously set position.

 
# The div-1 {position: static ;}
 

2. Position: relative

If you set position: relative, you can use top, bottom, left, and right to move the element relative to the position that should appear in the document. [This means that the element still occupies the original position in the document, but it is visually moved relative to its original position in the document]

 
# The div-1 {position: relative; top: 20px; left:-40px ;}
 

3. Position: absolute

When position: absolute is specified, the element is removed from the document [that is, the position is no longer occupied in the document]. You can accurately follow the top, bottom, left and right.

 
# The div-1a {position: absolute; top: 0; Right: 0; width: 200px ;}
 

4. Position: relative + position: absolute

If we set relative positioning for the div-1, all elements in the div-1 are positioned relative to the div-1. If you set absolute positioning for the div-1a, you can move the div-1a to the upper right of the div-1.

 
# Div-1 {position: relative;} # div-1a {position: absolute; top: 0; Right: 0; width: 200px ;}
 

5. Absolute positioning in the two columns

Now you can use relative positioning and absolute positioning to create a two-column layout.

 
# Div-1 {position: relative;} # div-1a {position: absolute; top: 0; Right: 0; width: 200px;} # div-1b {position: absolute; top: 0; left: 0; width: 200px ;}
 

6. The two columns are definitely positioned as high.

One solution is to set a fixed height for the element. However, this scheme is not suitable for most designs, because we generally do not know how much text will be contained in the element or the exact font size to be used.

# Div-1 {position: relative; Height: 250px;} # div-1a {position: absolute; top: 0; Right: 0; width: 200px;} # div-1b {position: absolute; top: 0; left: 0; width: 200px ;}
 

7. Floating

Absolute positioning does not work for columns with variable heights. The following is another solution.

We can move an element to the left/right, and the text is surrounded by it. This is mainly used for images, but here we use it for a complex layout task (because this is our only tool ).

 
# Div-1a {float: Left; width: 200px ;}
 

8. Floating Column

If we move an element to the left and the second element to the left, they will push up against each other.

 
# Div-1a {float: Left; width: 150px;} # div-1b {float: Left; width: 150px ;}
 

9. Clear floating Columns

After the floating element, we can clear the floating to make other elements locate correctly.

# Div-1a {float: Left; width: pixel PX ;}# div-1b {float: Left; width: pixel ;}# div-1c {clear: Both ;}
 

Although I have been using a floating layout, it is also necessary to master the position. In fact, it is not that difficult...

 

 

<! Doctype HTML public " -// W3C // dtd html 4.01 transitional // en "
" Http://www.w3.org/TR/html4/loose.dtd " >
< Html >
< Head >
< Meta HTTP - Equiv = " Content-Type " Content = " Text/html; charset = gb2312 " >
< Title > Untitled document </ Title >
  < Style Type = " Text/CSS " >
Body {
Font - Family: tahoma, Helvetica, Arial, sans - Serif;
Font - Size: 12px;
Padding: 0 ;

Text-Align: center;
Background-Color :#000000;

}
# Divbody {
Width: 1000px;
Height: 900px;
Margin: auto;
}
# Div - Before {
Width: 100 % ;
Height: 20px;
Background - Color: # ff0000;
}
# Div - After {
Width: 100 % ;
Height: 20px;
Background - Color: # fd0000;
}
# Div - 1 {
Width: 100 % ;
Height: 500px;
Background - Color :# 999999 ;
Position: relative;

}
# Div-1A {
Width: 200px;
Background-Color: # 3300ff;
Float: Left;

}
# Div-1B {
Width: 300px;
Height: 250px;
Background-Color: #66ff00;

}
# Div-1c {
Width: 100px;
Height: 250px;
Background-Color: #00 FFFF;
Margin: auto;

}
 </Style>
</Head>

< Body >
< Div ID = Divbody >
< Div ID = Div - Before > # Div - Before </ Div >
< Div ID = Div - 1 >
< Div ID = Div - 1a > Based on True Story, the Chinese ballet which made its premiere In 1964 based on True Story, the Chinese ballet which made its premiere In 1964 based on True Story, the Chinese ballet which made its premiere In   1964 Depicts the liberation of a peasant girl on Hainan Island. The classic ballet will be saved med by the Chinese central ballet troupe In Guangzhou In June.
</ Div >
< Div ID = Div - 1B > Based on True Story, the Chinese ballet which made its premiere In   1964 Depicts the liberation of a peasant girl on Hainan Island. The classic ballet will be saved med by the Chinese central ballet troupe In Gu.
</ Div >
< Div ID = Div - 1c > Based on True Story, the Chinese ballet which made its premiere In   1964 Depicts the liberation of a peas. D.
</ Div >
</ Div >
< Div ID = Div - After > # Div - After </ Div >
</ Div >
</ Body >
</ Html >