（1）定位類別： static(靜態) 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。 relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。 absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed（固定定位） 這里所固定的參照對像是可視窗口而并非是body或是父級元素?？赏ㄟ^z-index進行層次分級。 （2）相對定位

當Position屬性值為Relative時
對象原來占有的位置保留，其后面的對象按原來文檔流仍然保持原來的位置
Top的值表示對象相對原位置向下偏移的距離
bottom的值表示對象相對原位置向上偏移的距離
兩者同時存在時，只有Top起作用。
left的值表示對象相對原位置向右偏移的距離
right的值表示對象相對原位置向左偏移的距離
兩者同時存在時，只有left起作用。

如果相對定位的對象有padding 和border 和 margin時，定位的起點不受影響。還是原來物體的位置。

（3）絕對定位

當Position屬性值為absolute時
對象從文檔流中抽取出來，原占有的位置被后面的對象頂替上來
Top的值表示對象上邊框與瀏覽器窗口頂部的距離
bottom的值表示對象下邊框與瀏覽器窗口底部的距離
兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致，即垂直保持位置不變。
left的值表示對象左邊框與瀏覽器窗口左邊的距離
right的值表示對象右邊框與瀏覽器窗口右邊的距離
兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。
　　在Position屬性值為absolute的同時，如果有一級父對象（無論是父對象還是祖父對象，或者再高的輩分，一樣）的Position屬性值為Relative時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精確定位是很有幫助的。注：絕對定位與文檔流無關

（4）被關聯的定位

?

<div ——————————— position:relative;最近的祖先定位元素，參照物
?? <div—————————-沒有設置為定位元素，不是參照物
???? <div———————-沒有設置為定位元素，不是參照物
?????? <div box1
?????? <div box2 ——–position:absolute; top:50px; left:120px;
?????? <div box3 Box2設置成絕對定位元素，脫離了文檔流，文檔流由box1-box2-box3變為box1-box3，box2以最近的定位祖先（藍色框）為參照物。
層級關系為：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
?? <div—————————-沒有設置為定位元素，不是參照物
???? <div———————- position:relative 參照物
?????? <div box1
?????? <div box2 ——–position:absolute; top:50px; left:120px;
?????? <div box3
?

?

轉載于:https://blog.51cto.com/xfqxj/477070

總結

以上是生活随笔為你收集整理的position定位说明的全部內容，希望文章能夠幫你解決所遇到的問題。

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