一个相对定位的div在另一个相对定位的div内部，且具有顶部margin。

Question

一个相对定位的div在另一个相对定位的div内部，且具有顶部margin。

4

简而言之，我有一个相对定位的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内具有margin，这会将div1（这是奇怪的事情）向下推100像素。更有趣的是，如果我给div1添加边框或在其中写入内容，则此行为消失。

如果有人知道这是为什么，并且还有一个干净的解决方案，请让我向您请教。

- Andrei Oniga

div1 是 .header，div2 是 div.test？ - Jawad

是的，@Jawad。感谢您的提问，我没有意识到它们有不同的名称，我已经纠正了这个问题。 - Andrei Oniga

2个回答

1

这是由于“折叠边距”导致的。

规范：

一些更容易理解的文章：

如Aram Mkrtchyan所建议的那样，在这种情况下最简单的解决方法可能是在.header中添加overflow: hidden。这里有更多想法。

- thirtydot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aram Mkrtchyan · Accepted Answer

这是一个例子

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
}