html css佈局的三種方式(自然佈局/流動佈局/定位佈局)_HTML/Xhtml_網頁製作

1.自然版
沒有任何修飾的版面是自動靠左的。
2.流動版面
上面講的float:left的情況。
3.定位版面
相對定位和絕對定位都是相對於父div標籤的。
相對------以這個元素的本來應該在的位置為參考點
絕對－以父div標籤的原點（左上角）為參考點。

由於外層是position:relative，所以裡層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為佈局參照原點進行left,top對齊。

還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會尋找那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個佈局上是沒有差別的。

當然最後一種情況是：外層是：position:absolute;裡邊是position:relative，那會是什麼情況？以原來的原則，absolute會參考body為佈局原點，relative會參考他本來應該在的位置為佈局原點，這時候其實就是參考外層左上角為佈局原點。
其它的要看實際情況而定。