İlaçlar çakışmayı nasıl önler?

Question

Kulağa bürünmüş gibi görünen birkaç div var ama homemidcontent div'in homebanner div'in altında olmasını mı istiyorsunuz? Lütfen yardım et. Bu problemi nasıl aştım?

Fiddle: enter link description here

Biçimlendirme

<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

Sana elemanları yüzer sonra #homemidcontent için clear:both ekledik http://jsfiddle.net/6DtSS/5/ keman, Temizlemek gerektiğini kontrol edin eğer istiyorsa bir sonraki eleman için aşağıya otur.

z-index: 1; 

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

elle tek üstte olduğu yeniden sipariş verebilirsiniz z-index seçimi:

Answer 2

Eğer jsfiddle engellemeler koymak konumda tutmak, sen ile yapabilirsiniz.

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 
}