Html 如何阻止一层覆盖另一层

我遇到一个图层问题，该图层内容-3f显示在它下面的所有其他图层上：

<div id="content-3f">
            <div id="content-3-1f"><a href="aboutus.aspx"></a></div>
            <div id="content-3-2f"><a href="experiences.aspx"></a></div>
            <div id="content-3-3f"></div>
        </div>

        <div class="line"><hr class="top" /></div>  

截图：

正如你所看到的，它越过了

---

如何修复？

将以下内容添加到您的CSS中应该会给出您想要的答案

#content-3-1f, 
#content-3-2f, 
#content-3-3f {
    position:relative;
    z-index: 1;
}

基本上，z-index告诉我们该住在哪一层。默认图层为z索引：0

---

您还需要指定相对或绝对位置以使其生效。

问题是由于content-3f上的float:left。需要清除浮子才能使其工作。以下是您的解决方案：

HTML

css的其余部分保持不变。希望这有帮助

是的，我同意盖普。我想我没有好好研究你的css。造成问题的是高度：103px。去掉它，它就可以正常工作了

---

但我想指出的是，清除浮动始终是一个好主意。

更优雅的解决方案是在方框上使用display:inline块而不是float:left

---

创建一个“请”是因为黄线位于三个框的顶部吗？是的，在这条线的下面是这三个图形框覆盖的其他层。不，这只是覆盖在黄线上。我想在3个方框下面画黄线。@TeaDrinkingGeek No。它只会在其他div所在的地方画黄线。原始问题的语义问题。上面和下面都很模糊。因为每个内部元素都指定了高度，所以将外部元素的高度调整到相应的值将达到相同的效果，而不需要清除元素。啊哈！它是content-3f中的高度。它比图片小，这就是为什么。@gapple谢谢你指出这一点。我第一次没看到它真是太傻了。我已相应地编辑了答案：

#content-3-1f, 
#content-3-2f, 
#content-3-3f {
    position:relative;
    z-index: 1;
}

    <div id="content-3f">
        <div id="content-3-1f"><a href="aboutus.aspx"></a></div>
        <div id="content-3-2f"><a href="experiences.aspx"></a></div>
        <div id="content-3-3f"></div>
    </div>
    <div class="clear"></div>

      <div class="line"><hr class="top" /></div>  ​

#content-3f {
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
}
.clear {
clear:both;
}