語法：

position :?static|absolute|fixed|relative

參數：

static :無特殊定位，對象遵循HTML定位默認規則

absolute :絕對定位。將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。相對于position屬性非static值的最近父級元素進行偏移，如果父級都是static(文檔流)，則相對整個文檔進行偏移。偏移后，原來的空間會被其他元素擠占

relative :相對定位。對象不能想絕對定位一樣層疊，但可依據left，right，top，bottom等屬性在正常文檔流中相對原先對象的位置進行偏移。原先的位置會被其他元素擠占。

positon

名稱

(1)是否將對象脫離文檔流

(2)偏移參照對象

偏移屬性

(3)原先位置是否會被其他元素占用

(4)是否 能通過z-index層疊

absolute

絕對定位

是

相對于position屬性非static值的最近父級元素進行偏移，如果父級都是static(文檔流)，則相對整個文檔進行偏移(即body左上角坐標原點)

是

是

relative

相對定位

否

參照自身初始位置進行偏移

是

否

fixed :IE5.5及NS6尚不支持此屬性 。可以使元素在屏幕上保持固定，下拉滾動條，位置也不改變

知識點說明：

(1)文檔流是文檔中可顯示對象在排列時所占用的位置，瀏覽器解析html時，會按從上到下的順序，把元素放到相應位置。如div，p占用文檔流，他們本身是塊級元素(塊級元素無論width是否占滿網頁寬度，都會占用一行)，在文檔流則從上到下分行顯示div和p。

示例1：

?

View Code

我是div標簽

我是p標簽

而如果想讓div位置脫離文檔流偏移，讓解析時，把div脫離文檔流，相對左上角原點向右偏移400px，把p放到文檔流中，占用div本來的位置，則可以用絕對定位。

示例2：

?

View Code

我是div標簽

我是p標簽

這時候我們可以看出，絕對定位后，div偏離了文檔流，不再是從上到下顯示，而是把div偏移，p標簽占用本來的文檔流位置。

(2)偏移參照對象:

absolute絕對定位的偏移參照物是最近的position非static的父標簽。

示例3：

?

View Code

我是大div，我根據body向右偏移100px，小div要根據我的左上角原點偏移我是div標簽

我是p標簽

大divposition非static(默認是static)，可以是absolute，relative，小div都會參照大div定位。

示例4：

如果父標簽都是static，則再向上一級找非static的父標簽，直到找到body。如果父級都是static(文檔流)，則相對整個文檔進行偏移(即body左上角坐標原點)

為了顯示方便，先放點東東占位吧

為了顯示方便，先放點東東占位吧

為了顯示方便，先放點東東占位吧，大概占了60px了吧

?

View Code

我是大div，但我是static，只好讓小div根據body定位了我是div標簽，根據body，向下偏移100px；

relative相對定位的參照對象是自己的初始位置。

示例5：

?

View Code

為了顯示方便，先放點東西占位吧。為了顯示方便，先放點東西占位吧。為了顯示方便，先放點東西占位吧。大概占了60px了吧

我是div標簽，默認static，未進行定位

示例6、

?

View Code

我是div標簽，相對定位，根據初始位置向下偏移100px

(3)原先位置是否會被其他元素占用:

絕對或相對定位后，原先的位置會被其他元素占用，如示例2

(4)是否 能通過z-index層疊:

絕對定位的層可以層疊。

示例7、

?

View Code

我是div1，絕對定位，沒有設置z-index,雖然高度和div2一樣的，但div2會把我覆蓋我是div2，絕對定位，我能把div2覆蓋

示例8、

我是div1，我的z-index比div2高，所以把div2覆蓋我是div2，我的z-index是默認值，比div1低

總結

以上是生活随笔為你收集整理的定位的坐标原点HTML,html 定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。