本文向大家描述一下div css布局中的position屬性的用法，position屬性主要有四種屬性值，任何元素的預設position的屬性值均是static,靜態。這節課主要講講relative（相對）以及absolute（絕對）。
如何學習div+css布局之position屬性
如果用position屬性來布局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute。定位(position)布局頁面說容易非常容易，只需要記住這節課最後一句話就可以了，說困難，那是相當的難理解，需要一定的耐心，不過還好，kwoojan給大家總結的已經很通俗易懂了。
如果下面的文字實在是無法理解透，那就記住這節課最後總結的一句話「如果用position來布局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。」
任何元素的預設position的屬性值均是static,靜態。這節課主要講講relative（相對）以及absolute（絕對）。
【div+css布局之position屬性:absolute】
意思是：他的意思是絕對定位，他預設參照瀏覽器的左上角，配合top、right、bottom、left(下面簡稱trbl)進行定位，有以下屬性： 1)如果沒有trbl，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文字，則以它前面的最後乙個文字的右上角為原點進行定位但是不斷開文字，覆蓋於上方。
2)如果設定trbl，並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由trbl決定。
3)如果設定trbl，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由trbl決定。即使父級有padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影響。
以上三點可以總結出，若想把乙個定位屬性為absolute的元素定位於其父級元素內，只有滿足兩個條件：
第一：設定trbl
第二：父級設定position屬性
上面的這個總結非常重要，可以保證你在用absolue布局頁面的時候，不會錯位，並且隨著瀏覽器的大小或者顯示器解析度的大小，而不發生改變。
只要有一點不滿足，元素就會以瀏覽器左上角為原點，這就是初學者容易犯錯的一點，已經定位好的板塊，當瀏覽器的大小改變，父級元素會隨之改變，但是設定position屬性為absolute的板塊和父級元素的位置發生改變，錯位了，這就是因為此時元素以瀏覽器的右上角為原點的原因。 初學者很容易犯錯的是，不清楚position屬性為absolute的板塊，若想定位到父級板塊中，並且當瀏覽器的大小改變或顯示器的解析度改變，布局不發生改變，是需要滿足兩個條件的，只要有一點不滿足，元素就會以瀏覽器左上角為原點，從而導致頁面布局錯位。
【div+css布局之position屬性:relative】
意思是相對定位，他是預設參照父級的原始點為原始點，無父級則以文字流的順序在上乙個元素的底部為原始點，配合trbl進行定位，當父級內有padding等css屬性時，當前級的原始點則參照父級內容區的原始點進行定位，有以下屬性：
1)如果沒有trbl，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這裡和absolute第一條一樣)，如果在沒有父級元素的情況下，存在文字，則以文字的底部為原始點進行定位並將文字斷開(和absolut不同)。
2)如果設定trbl，並且父級沒有設定position屬性，仍舊以父級的左上角為原點進行定位(和absolut不同)
3)如果設定trbl，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由trbl決定(前半段和absolut一樣)。如果父級有padding屬性，那麼就以內容區域的左上角為原點，進行定位(後半段和absolut不同)。
以上三點可以總結出，無論父級存在不存在，無論有沒有trbl，均是以父級的左上角進行定位，但是父級的padding屬性會對其影響。
綜合上面對relative的敘述，我們就可以將position屬性為relative的div視成可以用trbl進行定位的的普通div，或者說只要將我們平時布局頁面的div的css屬性中加上position:relative後，就不只是用float布局頁面了，還可以用trbl進行布局頁面了，或者說加上position:relative的div也可以像普通的div進行布局頁面了，只不過還可以用trbl進行布局頁面。但是position屬性為absolute不可以用來布局頁面，因為如果用來布局的話，所有的div都相對於瀏覽器的左上角定位了，所以只能用於將某個元素定位於屬性為absolute的元素的內部某個位置。
這樣我們就可以總結比較重要的結論：
屬性為relative的元素可以用來布局頁面，屬性為absolute的元素用來定位某元素在父級中的位置，既然屬性為absolute的元素用來定位某元素在父級中位置，就少不了trbl，這時候根據一開始講的absolute的第三條，如果父級元素沒有position屬性那麼absolute元素就會脫離父級元素，但是如果是布局頁面，父級元素position的屬性又不能為absolute，不然就會以瀏覽器左上角為原點了，所以父級元素的position屬性只能為relative！
總結：如果用position來布局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。
div css布局漫談
1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...
常用div css布局
1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...
Div CSS布局入門
頁面布局與規劃 在網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就是構...