margin值移动变成相对于body？

Question

*{
    margin:0;
    padding:0;
}
.back{
    
    height: 100vh;
    width:    100vw;
    background:url("./b1.jpg") 0 0/100% auto fixed;
}
.content{
    border:3px solid black;
    position: relative;
    height: 300px;
    width:570px;
    margin:10% auto;
}
.content::before{
    content: '';
    display: block;

    position: absolute;
    left:0;top:0;right: 0;bottom:0;

}
html:
<div class='back'>
    <div class='content'></div>
</div>

代码如上，content里的margin-top应该相对于back的top啊 为什么现在的效果成了相对于body的top取margin 10%；
我要的效果是back在顶端，content在他里面类似于居中

Answer 1

因为margin重叠了，block 水平元素其中的一中margin重叠情况就是你写的这种，父元素和子元素重叠。
解决方法很多种
1.可以用back的padding代替
2.<div class='back'>

&nbsp;<div class='content'></div>

</div>
3.给back{overflow:hidden}
还有很多方法掌握几个常用的就可以了。

Answer 2

http://www.hujuntao.com/web/c...

可以参考这个