1 文檔流

文檔流是瀏覽器默認的排版方式
文檔流的排版方式是塊級元素垂直排布，行內元素和行內塊元素水平排布。

2 脫離文檔流

脫離文檔流是不按照文檔流的排版方式進行排版，脫離后，元素不在布局中，不在流中占有位置，處于漂浮狀態，后面的文檔流中的元素會補上去。

會造成脫離文檔流的情況：

浮動：給元素添加float屬性，且屬性值不為none。

定位：設置position為absolute和fixed。fixed會固定在窗口上，absolute會隨著滾動條滾動

元素脫離文檔流存在的問題：

會導致父元素高度塌陷可以

通過將父子元素放置在同一個BFC中解決，或者使用清除浮動

3 定位方式

static：默認定位值，元素出現在正常的流中，會忽略top,bottom,left,right,z-index的設置

relative：相對定位，不會脫離文檔流，在文檔流中占有位置，可以通過top,bottom,left,right的設置相對于其正常**（原先本身）**位置進行定位。可通過z-index進行層次分級。

absolute：絕對定位，會脫離文檔流，相對static定位以外的第一個父元素定位。

fixed：固定定位，相對于瀏覽器窗口進行定位。

4 使用場景

設置水平居中position:absolute; left:50%; transform:translateX(-50%)

設置垂直居中position:absolute; top:50%; transform:translateY(-50%)

總結

以上是生活随笔為你收集整理的【HTML/CSS】定位方式及区别的全部內容，希望文章能夠幫你解決所遇到的問題。

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