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;
}

有趣的是，由于div1（parent）中div2（child）的余量以及它相对定位的事实，这将 div1 （这是奇怪的事情）推下100px。更有趣的是，如果我向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
}

Answer 2

这种情况正在发生，因为“利润率下降”。

规范：

一些更容易阅读：

正如Aram Mkrtchyan已经提出的，在这种情况下最简单的解决方法可能是将overflow: hidden添加到.header。 Here are some more ideas.

相对（定位）div与顶部边距在另一个相对div内

2 个答案: