给了body position:relative后 子元素的margin-top值会影响其他子元素的相对定位的位置是什么原理

Question

html结构

底下两个div是用的absolut定位的

把body的relative去掉后的样式

加上后的样式 请问这是为什么....定位不是都脱离文档流了么 为什么还会被其他元素的margin值改变 还是说body relative后 被第一个的div的margin-top改变了body的位置?

Answer 1

给了body position:relative后 子元素的margin-top值会影响其他子元素的相对定位的位置是什么原理

对现象的错误理解而已。record_bg 影响的不是其它子元素，而是 body，这是因为 margin-top 坍塌了。

没有设置 position:relative 之前其它子元素是按 viewport 定位，设置了之后就按 body 来定位，所以看到错位了。

可以对 body 设置 padding 代替 margin-top

Answer 2

模拟一下你的情况
https://jsfiddle.net/sttbf5zh/
主要的问题还是在于对margin合并渲染策略和position相对位置的计算点。
1、由于body和你的得分背景层都是块状元素，并且父子关系之间没有其他元素阻隔，那么你在背景层record_bg上设置的margin或上升给父元素。
2、position:absolute布局的定位计算点为最近的position:relative的父层，body默认的position不是relative ，所以不能相对body计算，而是相对于html做的计算。
3、当body设置了position:relative后，btn在做定位计算时会从body内容区开始计算，此时的body获得了背景层的上升margin-top，所以top的计算会从5vh开始。