如圖我把head這個div的position設為fixed的但是下面所有的div好像都往上去了，就像是把head這個div從文檔流中給拉出來了一樣

position設為fixed會脫離文檔流的，你設置一個margin-top等于那個head的高，這樣就好了

追問：

我看了下極客學院的頁面他們就沒設置，但是依然不會脫離文檔流

提問者評價問題搞明白了，他們在在那個外面套了一個一模一樣的DIV就行static(默認)，relative(相對定位)，absolute(絕對定位)和fixed(固定定位)。其中static和relative會占據文檔流空間，他們并不是脫離文檔的。absolute和fixed是脫離文檔流的，不會占據文檔流空間首先position一般分為relative和absolute，相對定位的元素使得元素“浮”了起來，就是說z-index大于0的，應該是1，所以不論它怎么進行移動卻總是覆蓋普通文檔流元素，而且定位可激活z-index，可以對其設置z-index層疊關系，而且相對元素是保留了自己的占位信息，普通文檔流中的元素不會認為它不存在，它的移動方式是以自身為基準的，移動方式為left right bottom top ，

而絕對定位元素首先它是脫離了文檔流，而且并沒有保留占位信息，但是也大于z-index，普通元素不認為它存在，它的定位方式是以附近祖先元素或者父級元素設置了定位以基準的，如果無，則body，而且absolute會改變元素的display類型為inline-block，

浮動定位，可以說明他是脫離了文檔流，而且z-index在0這一層，定位方式為left right，直到碰到它的包圍框或其他浮動元素為止，它也可以改變元素的display類型為inline-block，但是對absolute、float設置display類型是無效的，最后，文本元素并不會覆蓋浮動元素。詳細說明的話就復雜了，先不說了。

總結

以上是生活随笔為你收集整理的postion absolut和fix 会脱离文档流的全部內容，希望文章能夠幫你解決所遇到的問題。

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