配置されたdivが重なっているのはなぜですか？

Question

私は内部に2つのコンテンツdivを持つメインラッパーdivを持っています。両方のコンテンツのdivのposition属性がrelativeに設定されているが、ここに示すように、何らかの理由で、彼らは重複している：

私は赤枠のdivは青い1の下になりたいとトラブルを抱えていますそのようにする方法を考え出す。

#wrap { 
 
    height: 500px; 
 
    width: 350px; 
 
    border: 3px solid black; 
 
} 
 
#upper { 
 
    position: relative; 
 
    width: 40%; 
 
    height: 70%; 
 
    top: 5%; 
 
    left: 2%; 
 
    border: 1px solid blue; 
 
    text-align: center; 
 
} 
 
#lower { 
 
    position: relative; 
 
    width: 40%; 
 
    height: 20%; 
 
    left: 2%; 
 
    border: 1px solid red; 
 
}

<div id="wrap"> 
 
    <div id="upper"></div> 
 
    <div id="lower"></div> 
 
</div>

誰かが私がそれらを正しく整列する方法を見つけ出す助けてくださいことはできますか？下のdivのために

Answer 1

div＃upperDivのスタイリングにはトップがあります：これが原因で発生する5％。相対的ですが、div＃upperDivはdiv＃lowerDivで重なり合うように5％トップを取っています。 解決方法：上部を取る：upperDivから5％スタイリングオフまたはlowerDivに同じトップスタイルを追加します。

Answer 2

あなたはuがパーセンテージで高さを利用してrはので、それが起こっているclear:both;

#lowerDiv { 
    position: relative; 
    clear:both; 
    width: 40%; 
    left: 2%; 
    border: 1px solid red; 
    text-align: center; 
} 

Answer 3

を追加してみてくださいすることができます。あなたが取ったように、upperDivのHeightは70％です。それはウルのメインディビジョンの70％を取っている。 ur lower divは同じouter divで調整できるよりも多くのデータを持っています。したがって、ur lower divがそれに提供するスペースの残りの30％で調整できるように、urメインディビジョンは十分に大きくなければなりません。またはuは、両方のスペースで調整できるように、ur upperDivの高さのパーセンテージ値を調整できます。