1，static(默認)當(dāng)你沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對較好的布局效果。 一般來說，我們不需要指明當(dāng)前元素的定位方式是static——因為這是默認的定位方式。除非你想覆蓋從父元素繼承來的定位系統(tǒng)。 left,top屬性對static沒有效果，static是靠margin這些定位的。 2，relative(相對定位)在static的基礎(chǔ)上，如果我想讓一個元素在他本來的位置做一些調(diào)整(位移)，我們可以將該元素定位設(shè)置為relative，同時指定相對位移(利用top,bottom,left,right)。 有一點需要注意的是，相對定位的元素仍然在文檔流中，仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了。
3，absolute(絕對定位)如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設(shè)置為absolute，同時使用top,bottom,left,right來定位。 如果沒有父元素，位置是相對于body來進行的。 絕對定位會使元素從文檔流中被刪除，結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充。
4，mix relative and absolute(混合相對定位和絕對定位)如果對一個父元素設(shè)置relative，而對它的一個子元素設(shè)置absolute，如：
則子元素的絕對定位的參照物為父元素。
利用混合定位，我們可以用類似下面的css來實現(xiàn)兩列(Two Column)定位
5, fixed(固定定位)我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”，那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)，怎么辦呢？ 答案是使用fixed定位，fixed定位的參照物總是當(dāng)前的文檔。利用fixed定位，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位。比如你想添加一個信息提示的div，并將該div固定在右上方，你可以使用以下css
6,float(浮動)對于浮動，需要了解的是： *浮動會將元素從文檔流中刪除，他的空間會被其它元素補上。 *浮動的參數(shù)物是父元素，是在父元素這個容器中飄。 *為了清除浮動造成的對浮動元素之后元素的影響，我們在浮動元素之后加一個div，并將這個div的clear設(shè)置為both。 *如果兩個元素都設(shè)置了浮動，則兩個元素并不會重疊，第一個元素占據(jù)一定空間，第二個元素緊跟其后。如果不想讓第二個元素緊跟其后，可以對第二個浮動的元素使用clear。
7，reference
http://www./screencast/html-training/css/positioning/ |
|
|
來自： hongjing_z > 《HTML》
