问题 如何防止div重叠?


我有几个看起来像是小提琴的div,但是想要homemidcontent div低于homebanner div?请帮忙。我怎么解决这个问题呢?

小提琴: 在此输入链接描述

标记

<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;
}

3847
2017-08-31 04:39


起源



答案:


请检查小提琴 http://jsfiddle.net/6DtSS/5/ 我已经添加 clear:both 至 #homemidcontent 浮动元素后,如果它想要位于下方,则应将其清除为下一个元素。


12
2017-08-31 04:45



哇这么简单..谢谢很多 - user2725936
我一直在寻找这个答案。这是一个非常简单的解决方案。谢谢。 - Dan Torrey


答案:


请检查小提琴 http://jsfiddle.net/6DtSS/5/ 我已经添加 clear:both 至 #homemidcontent 浮动元素后,如果它想要位于下方,则应将其清除为下一个元素。


12
2017-08-31 04:45



哇这么简单..谢谢很多 - user2725936
我一直在寻找这个答案。这是一个非常简单的解决方案。谢谢。 - Dan Torrey


保持你把块放在你的jsfiddle中的位置,你可以这样做:

z-index: 1;

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

手动选择z-index,您可以重新排序哪一个在顶部。


4
2017-08-31 04:49



非常感谢..我更喜欢清楚:两种方法都是容器。谢谢你的帮助 - user2725936


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
}

0
2017-08-31 04:56



这是不必要的,它发生是因为他没有清除上面浮动的元素。如果他不清除浮动并继续使用边距,他最终会遇到问题。 - Sharath Daniel
谢谢你的帮助我更喜欢明确:两种方法 - user2725936
@ user2725936 =没关系。 - Iren Patel