宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

如图我把head这个div的position设为fixed的但是下面所有的div好像都往上去了,就像是把head这个div从文档流中给拉出来了一样

postion absolut和fix 会脱离文档流-风君雪科技博客

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类型是无效的,最后,文本元素并不会覆盖浮动元素。详细说明的话就复杂了,先不说了。