兩個相對的div互相重疊

Question

我有以下代碼：

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 30%; 
 
    margin: 0 35%; 
 
    background: yellow; 
 
    position: relative; 
 
    height: 900px; 
 
} 
 
.p1_1 { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 70%; 
 
    top: 10%; 
 
    left: 0; 
 
    background-color: green; 
 
} 
 
.p1_2 { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20%; 
 
    border: 1px solid blue; 
 
    top: 0; 
 
}

<div class="container"> 
 
    <div class="p1_1"> 
 
    top box 
 
    </div> 
 
    <div class="p1_2"> 
 
    hello box 
 
    </div> 
 
</div>

我的問題是，爲什麼是頂：中.p1_1 10％影響.p1_2的位置？我會認爲這是一個非常簡單的相對於第二個div的相對位置 - 除非我錯過了一些非常明顯的東西？

好的 - 所以下面的代碼更接近我的預期，但是如何有15％的空間不是10％（即設置margin-top：15％可以正常工作），所以我很困惑70 + 10 + 20不能等於100？

html,body { 
    padding:0; 
    margin:0; 
    height:100%;      
    position:relative; 
} 

.container { 
    width:30%; 
    margin:0 35%; 
    background:yellow; 
    position:absolute; 
    height:100%; 
    top:0; 
} 

.p1_1 { 
    position:relative; 
    width:50%; 
    height:70%; 
    margin-top:10%; 
    background-color:green; 
} 

.p1_2 { 
    position:relative; 
    width:100%; 
    height:20%; 
    background-color:blue; 
}  

我還發現http://www.barelyfitz.com/screencast/html-training/css/positioning/選項卡上的2說明如何

「注意這裏DIV-1，如果我們沒有 移動它通常會一直空間：現在是一個空的空間。當我們移動div-1時，下一個元素（div-after）沒有移動，這是因爲div-1仍然佔據了文檔中的原始空間，即使我們移動了它。

Answer 1

這裏有一種方法是如何根據父母的身高將2格降低10％，保持其父母的70％和20％。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 30%; 
 
    margin: 0 35%; 
 
    background: yellow; 
 
    position: relative; 
 
    height: 900px; 
 
} 
 
.p1_1 { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 70%; 
 
    left: 0; 
 
    top: 10%; 
 
    background-color: green; 
 
} 
 
.p1_2 { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20%; 
 
    border: 1px solid blue; 
 
    top: 10%; 
 
}

<div class="container"> 
 
    <div class="p1_1"> 
 
    top box 
 
    </div> 
 
    <div class="p1_2"> 
 
    hello box 
 
    </div> 
 
</div>