如何防止div重疊？

Question

我有幾個divs似乎在一圈，而不是小提琴，但希望homemidcontent div低於homebanner div？請幫忙。我該如何解決這個問題？

小提琴：enter link description here

標記

<div id="homecontent-mid" class="row rounded"> 
<div id="homebanner" class="rounded"> 
    <div class="sliderdiv">Slider Content</div> 
    <div class="main-search">Search Content Here</div> 
</div> 
<div id="homemidcontent" class="rounded"> 
    <div id="home-mid-mid">Mid content here</div> 
    <div id="home-mid-right">Mid Content Right here</div> 
</div> 
</div> 

CSS

#homecontent-mid { 
background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF; 
border: 1px solid #BDBCBD; 
margin-top: 0; 
min-height: 100%; 
outline: medium none; 
overflow: visible; 
position: relative; 
} 

#homebanner { 
background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent; 
padding-right: 20px; 
position: relative; 
} 

.sliderdiv { 
background: white; 
float: right; 
} 

.main-search { 
background: none repeat scroll 0 0 #FFFFFF; 
border: medium solid #D51386; 
float: left; 
overflow: hidden; 
padding: 20px 10px; 
border-radius: 10px; 
} 

#homemidcontent { 
background: #fff; 
padding-right: 20px; 
position: relative; 
} 

#home-mid-mid { 
background: yellow; 
} 

#home-mid-right { 
background: pink; 
} 

Answer 1

請檢查http://jsfiddle.net/6DtSS/5/ 我已經添加到clear:both#homemidcontent 您浮動元素後的小提琴，你應該清楚它爲下一個元素，如果它想坐在正下方。

Answer 2

保持你把塊你的jsfiddle的位置，你可以做到這一點：

z-index: 1; 

http://jsfiddle.net/djsbellini/JZAx8/

選擇的z-index手動可以重新排序，其中一個是在頂部。

Answer 3

You use margin in HOMEIDCONTENT CSS class and change your div position. 

homemidcontent {

background: #fff; 
    padding-right: 20px; 
    position: relative; 
    margin-top:70px;//Write this 
}