相對（定位）分度內的另一個相對的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; 
} 

有趣的是，由於div1（父母）內的div2（孩子）的邊際以及它相對定位的事實，這會將div1（這是奇怪的事情）推下100px。更有趣的是，如果我爲div1添加邊框或在其中寫入內容，則此行爲將消失。

如果有人知道爲什麼會發生這種情況，並且對這個問題有一個清晰的解決方案，我非常想挑選你的大腦。

Answer 1

這是因爲 「崩潰的邊緣」 的發生。

該規範：

• http://www.w3.org/TR/CSS2/box.html#collapsing-margins
• http://www.w3.org/TR/css3-box/#collapsing-margins

一些容易讀：

• http://complexspiral.com/publications/uncollapsing-margins/
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.howtocreate.co.uk/tutorials/css/margincollapsing

正如已經亞蘭Mkrtchyan，在這種情況下，最簡單的解決建議可能是overflow: hidden添加到.header。 Here are some more ideas.

Answer 2

有一個例子

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 
}