以下代码，分别给节点 #box 增加如下样式，问节点 #bo

[填空题]

以下代码，分别给节点 #box 增加如下样式，问节点 #box 距离 body 的上边距是多少？

</div>

</body>

如果设置 position: static ; 则上边距为1 px

如果设置 position: relative ; 则上边距为2 px

如果设置 position: absolute ; 则上边距为3 px

如果设置 position: sticky ; 则滚动起来上边距为4 px

查看答案及解析

推荐

泅渡°

position: static ; 则上边距为( 20 ) px 静态定位 top值无效

position: relative ; 则上边距为( 30 ) px 移动的时候会包括margin
position: absolute ; 则上边距为( 30 ) px 移动的时候会包括margin
position: fixed ; 则上边距为( 30 ) px 固定定位的margin也会生效移动的时候也会包括margin
position: sticky ; 则上边距为( 20 ) px，页面滚动起来为（10）px，margin会无效；页面没滚动的时候是静态定位

编辑于 2017-07-17 14:25:56 回复(4)

toln

不是margin在竖直方向上会重叠吗，第一个空难道不是0

发表于 2017-08-23 16:52:08 回复(5)

前端小白啦

https://www.cnblogs.com/coco1s/p/6402723.html这篇文章讲的很清晰，大家可以去看看

发表于 2018-09-08 21:04:17 回复(2)

广陵啸

https://www.imooc.com/wenda/detail/357121?t=259812
position: static，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性，只有margin:20px 10px好使，margin-top为20px,所以上边距为20px
position: relative ; 元素设置相对于原本位置的定位,margin-top的20px加上top的10ox为30px
position: absolute 同上，只不过这个定位是脱离文档流的
position: sticky 元素未滚动，在当前可视区域他的top值不生效，只有margin生效，滚动起来后margin失效，top值生效

发表于 2018-03-06 21:50:23 回复(1)