如何防止div重叠？

Question

我有几个div似乎重叠了，就像这个jsfiddle链接中的示例，但是我想让homemidcontent div在homebanner div下面。请帮忙解决这个问题，应该怎么做？

示例链接: enter link description here

HTML代码：

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

- user2725936

Answer 1

请查看样例 http://jsfiddle.net/6DtSS/5/。 我向 #homemidcontent 添加了clear:both。 当您浮动元素后，如果下一个元素要放在其下方，则应清除它。

- majorhavoc

---

我寻找这个答案已经很长时间了。这是一个非常简单的解决方案。谢谢。 - Dan Torrey

感谢这个解决方案，特别是clear:both。它帮了我很多。 - Sandeep Kamath

Answer 2

保持您在jsfiddle中放置块的位置，您可以使用以下方法：

z-index: 1;

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

选择手动设置 z-index，您可以重新排列哪个在顶部。

- H.D.

---

非常感谢您的帮助。我更喜欢使用 clear:both 方法而不是容器方法。 - user2725936

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
}

- Iren Patel

---

这是不必要的，发生这种情况是因为他没有清除上面浮动的元素。如果他不清除浮动并继续使用边距，最终会遇到问题。 - majorhavoc

@user2725936 = 没问题。 - Iren Patel

Answer 4

我解决了一个类似的问题，我有一个想要居中的按钮，接着是页面底部的版权页脚。

原始代码如下：

<div class="home_button">
            <a href="/home/dashboard">Dashboard</a>
            </div>
<div>Copyright...</div>

这将我的按钮推到了左边，并将版权信息挤在了旁边。

我添加了边距，使按钮“占据”整个宽度：

<div class="home_button" style="width:50%;margin-left:25%;margin-right:25%;">
            <a href="/home/dashboard">Dashboard</a>
            </div>
<div>Copyright...</div>

现在它能正确显示了。

- AZB