如何阻止一层越过另一层

Question

我遇到了一个图层问题，这个图层内容-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-3f {
        float: left;
        width: 880px;
        height: auto;
        padding: 10px 0px 10px 26px;
        height: 103px;
        clear:both;
    }

    #content-3-1f 
    {
        float: left;
        width: 269px;
        height: 202px;
        margin:0px 20px 0px 0px;
        padding: 0px;
        background: url('../images/Guided-tour-logo.png') no-repeat left top;
    }

    #content-3-1f a
    {
        width: 269px;
        height: 202px;
        display:block;
    }

    #content-3-2f 
    {
        float: left;
        width: 269px;
        height: 202px;
        margin:0px 20px 0px 0px;
        padding: 0px;
        background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
    }

    #content-3-2f a
    {
        width: 269px;
        height: 202px;
        display:block;
    }

#content-3-3f 
{
    float: left;
    width: 269px;
    height: 202px;
    margin:0px 0px 0px 0px;
    padding: 0px;
    background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}    

截图：

如您所见，它超越了<hr>

如何解决？

Answer 1

问题是由于＃content-3f上的“float：left”。需要清除浮动才能使其工作。这是你的解决方案::

HTML

    <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>  ​

注意带有“clear”类的附加div这用于清除元素中的float。

现在的CSS

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

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

是的，我同意gapple。我想我没有正确研究你的CSS。它的“高度：103px”正在造成问题。删除它，它按原样工作。

但我想指出，尽管如此，清除漂浮物总是一个好主意。

Answer 2

将以下内容添加到CSS中可以为您提供所需的答案。

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

基本上z-index告诉我们生活在哪个“图层”。默认图层为z-index: 0;

您还需要指定相对位置或绝对位置才能生效。

Answer 3

更优雅的解决方案是在您的盒子上使用display:inline-block而不是float:left。

http://www.vanseodesign.com/css/inline-blocks/