为何未设置top的fixed定位header会继承兄弟元素margin-top值?
问题原因解析
这是固定定位元素的初始定位规则和文档流中外边距折叠共同作用的结果:
- 首先,正常文档流里,相邻块级元素的垂直外边距会发生折叠。你的section设置了
margin-top: 120px,如果header和section是直接相邻的块级元素,这个外边距会向上影响header的位置——相当于把header和section一起往下推了120px,此时header在正常流中的位置距离视口顶部就是120px。 - 当给header设置
position: fixed后,它会脱离正常文档流,但浏览器会保留它在未脱离流时的初始位置作为默认偏移基准。如果你没有显式设置top属性,浏览器会将这个初始位置的top值作为top的计算值,也就是你在开发者工具中看到的120px。
相关规范说明
根据CSS定位模块的规则:
对于固定定位元素(position: fixed),其包含块是初始包含块(即视口)。当未显式指定top、right、bottom、left这些偏移属性时,它们的计算值等于元素在正常文档流中对应的偏移位置的数值,也就是元素原本在流中会占据的位置坐标。
另外,外边距折叠的核心规则是:相邻块级元素的垂直外边距会合并为一个外边距,取数值最大的那个(若为正负值则做代数和)。当父容器没有边框、内边距或清除浮动时,子元素的外边距会“溢出”到父容器外,进而影响父容器的位置。
内容的提问来源于stack exchange,提问作者balteo
相关产品推荐
相关产品推荐

