html頁面佈局中佈局方法(position)分為相對佈局(relative)和絕對佈局(absolute)

position的五個屬性值：

• static  
• inherit
• fixed
• relative
• absolute

我們再以次介紹各個屬性值的作用以及會產生的效果: 

1.static 

 static屬性為預設值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）.

2.inherit

規定應該從父元素繼承 position 屬性的值.

3.fixed

生成絕對定位的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定.

4.relative(著重介紹) 

生成相對定位的元素，相對於其正常位置(即應當所在的位置)進行定位。 因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素.

• 假設一個容器中有sub1和sub2兩個元件,當設定sub1為的position為relative後，將根據top，right，bottom，left的值按照它理應所在的位置進行偏移，relative的“相對的”意思也正體現於此。 對於此，您只需要記住，sub1如果不設定relative時它應該在哪裡，一旦設定後就按照它理應在的位置進行偏移。 隨後的問題是，sub2的位置又在哪裡呢？答案是它原來在哪裡，現在就在哪裡，它的位置不會因為sub1增加了position的屬性而發生改變.如果此時把sub2的position也設定為relative，會發生什麼現象？此時依然和sub1一樣，按照它原來應有的位置進行偏移.

5.absolute (著重介紹) 

生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定.

假設一個容器中有sub1和sub2兩個元件,當設定sub1為的position為absolute後:

• 當sub1的父物件(或曾祖父，只要是父級物件)parent也設定了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是預設值的情況，此時sub1按照這個parent來進行定位。 注意，物件雖然確定好了，但有些細節需要您的注意，那就是我們到底以parent的哪個定位點來進行定位呢？如果parent設定了margin，border，padding等屬性，那麼這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位，也就是忽略padding，當然並不會忽略margin和border。 接下來的問題是，sub2的位置到哪裡去了呢？由於當position設定為absolute後，會導致sub1溢位正常的文件流，就像它不屬於 parent一樣，它漂浮了起來，在DreamWeaver中把它稱為“層”，其實意思是一樣的。此時sub2將獲得sub1的位置，它的文件流不再基於 sub1，而是直接從parent開始.
• 如果sub1不存在一個有著position屬性的父物件，那麼那就會以body為定位物件，按照瀏覽器的視窗進行定位，這個比較容易理解.