父级相对定位 子级绝对定位

Question

这个是css代码：

<style>
        .wrapper{
            position: relative;
            background-color:aquamarine;   
        }
        .header{
            border: 1px solid red;
            position: absolute;  
            background-color:aquamarine;
        }
        .baidulogo{
            margin-top: 200px;
            text-align: center;
            border: 1px solid black;
            background-color: #3388ff;          
        }
        baidulogo img{
            width: 270px;
            height: 129px;
        }
    </style>
    这个是html部分
    <div class="wrapper">
    <div class="header">
        <sapn class="nav">新闻</sapn>
    </div>
</div>
<div class="baidulogo">
    <img src="bd_logo1.png">
</div>

问题：为什么改变.header的margin-top值.header的位置也跟着改变，是什么原理？

Answer 1

由于header是绝对定位提升层级，.baidulogo会挤上去造成 margin-top传递给父级。关于margin-top折叠可以参照 https://www.w3cplus.com/css/u...

Answer 2

absolute定位与margin定位其实是没有什么冲突的，无论absolute元素时候设置了left/top值，其margin属性值都是可以起作用的。下面展示的是没有left/top值的absolute元素的margin定位。
可以看一下这一片文章：http://www.zhangxinxu.com/wor...