css - 相对(定位)div，上边距位于另一个相对 div 内

Question

简而言之，我有一个具有以下样式的相对定位的div:

.div1 {
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 269px;  
    margin:0 auto;
    padding:0px;
    position: relative;
    background-position: center top;
}

其中的另一个 div 样式如下:

.div2 {
    position: relative;
    width: 815px;
    height: 74px;
    margin-top:100px;
}

有趣的是，由于 div2(子级)在 div1(父级)内的边距以及它相对定位的事实，这会将 div1(这很奇怪)向下推 100 像素。更有趣的是，如果我向 div1 添加边框或在其中写入内容，这种行为就会消失。

如果有人知道为什么会发生这种情况，并且对这个问题也有一个干净的解决方案，我非常想征求您的意见。

Answer 1

有一个例子

http://jsfiddle.net/amkrtchyan/urNRR/

.header {
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 269px;  
    margin:0 auto;
    padding:0px;
    position: relative;
    background-position: center top;
    overflow: hidden // add this
}