Html 如何防止div重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18544542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent divs from overlapping?
提问by user2725936
I have several divs that seem to over lap as per the fiddle but want the homemidcontent div to be below the homebanner div? Please help. How do I over come this problem?
我有几个 div 似乎按照小提琴重叠但希望 homemidcontent div 低于 homebanner div？请帮忙。我如何克服这个问题？
Fiddle: enter link description here
小提琴：在此处输入链接描述
Markup
标记
<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
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;
}
采纳答案by Sharath Daniel
Please check the fiddle http://jsfiddle.net/6DtSS/5/I've added clear:bothto #homemidcontentAfter you float the elements,you should clear it for the next element if it wants to sit right below.
请检查小提琴http://jsfiddle.net/6DtSS/5/我添加clear:both到#homemidcontent您浮动元素后，你应该，如果要正确坐在下面，清除它的下一个元素。
回答by H.D.
Keeping the position you put the blocks in your jsfiddle, you can do that with:
保持将块放在 jsfiddle 中的位置，您可以使用以下方法：
z-index: 1;
http://jsfiddle.net/djsbellini/JZAx8/
http://jsfiddle.net/djsbellini/JZAx8/
Choosing the z-index manually you can re-order which one is on top.
手动选择 z-index，您可以重新排序最上面的那个。
回答by Iren Patel
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 }
家庭内容{
background: #fff; padding-right: 20px; position: relative; margin-top:70px;//Write this }
