文檔流

文檔流，是指盒子按照html標簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內元素在一行之內從左到右排列，先寫的先排列，后寫的排在后面，每個盒子都占據自己的位置。

?

定位：

1、relative 生成相對定位元素，元素所占據的文檔流的位置保留，元素本身相對自身原位置進行偏移。

2、absolute 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。

3、fixed 生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。

4、static 默認值，沒有定位，元素出現在正常的文檔流中，相當于取消定位屬性或者不設置定位屬性。

?

定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設置相對于參照元素的偏移值。

?

定位元素層級

定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設置元素的層級

偽代碼如下:

???......
??? position:absolute;? /* 設置了絕對定位 */
??? left:200px;??????????? /* 相對于參照元素左邊向右偏移200px */
??? top:100px;????????? /* 相對于參照元素頂部向下偏移100px */
??? z-index:10????????? /* 將元素層級設置為10 */

?

定位元素特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

相對定位	絕對定位	固定定位	默認沒有定位
relative	absolute	fixed	static
參照自己	參照父元素,父元素需要設置relative	參照瀏覽器	?
移動之后原先的位置還在	脫離文檔流,不占位置	脫離文檔流,不占位置	?
?	?	?	?

總結

以上是生活随笔為你收集整理的定位position（前面布局无法实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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