十步學習css定位知識
這個教程解釋了css布局中的以下問題：
position:static,
position:relative,
position:absolute,
float
作為例子的div的代碼：
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c"><p>id = div-1c</p></div>
</div>
</div>
<!-- /id=div-1-padding /id=div-1 -->
<div id="div-after">
<p>id = div-after</p>
</div>
</div>
1 position:static
這是所有元素的默認position，
表示：元素沒有做特殊定位處理，元素會出現在文檔中它應該在的位置。
#div-1 {
position:static;
}
2 position:relative
相對元素本應該在位置的top,bottom,left,right。
#div-1 {
position:relative;
top:20px;
left:-40px;
}
可以看到div-1之后的元素div-after在div-1移動之后，沒有跟著移動，而是保持原來的位置，這是因為div-1在被移動之后，它還是占著原來的位置。這個特性將在后面被使用，可以看到它的用處。
3：absolute
absolute的元素將被從文檔中移出來（參加normal flow的概念），放在指定的位置。如，
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
因為div-a被移出來了，所以后面的元素也將向上移動，以填補div-a的空缺。可以看到div-a被移到網頁右上角了。其實，我們真正想要的是讓div-a位于相對div-1的右上角，而不是整個網頁。
IE有個bug：如果用百分數來表示width，IE會基于元素的父元素來計算這個值，而不是基于被移動的這個元素來計算。
4 positive:relative和positive:absolute
為了將上面的例子糾正為div-a在div-1的右上角，這樣做：
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
如果一個被指定為absolute的元素，其父元素是relative的，那么就將相對于其父元素被移動，否則就將基于根元素，即body（？html）來移動。
5 兩列的布局
#div-1 {
position:
relative
;
}
#div-1a {
position:
absolute
;
top:0;
right:0;
width:200px;
}
#div-1b {
position:
absolute
;
top:0;
left:0;
width:200px;
}
用absolute
的一個好處
：
可以按任何順序布局元素的位置，而不是受到元素在html中的聲明位置（前后關系）。如上，div-1b在div-1a左邊，但是聲明的時候，div-1a在前面。
但是上面也有一個問題，其他元素被遮住了，本例中就是div-after。
6 兩列的absolute height
為了解決上面的問題，可以顯式定義div-1的高度，
#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;
}
這樣，div-after又可以看見了。
但是問題是，要估算一個正確的高度不容易。
7 float
通過浮動的方式來解決上面的問題：
#div-1a {
float:left;
width:200px;
}
可以看到，不用定義div-1的高度，也可以看見div-after。
Float常被用到圖像的布局，以及其他復雜的布局。Float是進行復雜布局唯一可用的工具。
8 多個浮動的列
將相鄰元素都浮動，它們會一個接一個地排列。
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9 用clear來float
在7中使用了float之后div-1a被浮動，同時div-1b將div-1a包圍了。為了除去包圍，使用clear。
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
關于float和clear的使用，請參加更多的資料。如，
10 上面的例子很簡單，并且沒有瀏覽器兼容問題。
另外，
十步學習css定位知識