Question

在下面的代码中，我希望#nav div与#content div重叠。即使#nav具有更高的z-Index值，它仍然与#content重叠。

HTML：

<div id="page">
    <div id="nav"></div>
    <div id="content"></div>
</div>

CSS：

#page
{
    margin: 20px 0px;
    padding: 10px;
    display: block;
    width: 70%;
    height: 200px;
    border: 1px solid gray;
}

#nav
{
    float: left;
    width: 40px;
    height: inherit;
    border: 1px solid red;
    z-index: 999;
}

#content
{
    float: left;
    margin-left: -20px;
    width: 200px;
    height: inherit;
    border: 1px solid blue;
    background: lightgray;
    z-index: 0;
}

非常简单的代码，但我无法理解我做错了什么。任何帮助将不胜感激。

注意：我在没有外部div（http://jsfiddle.net/Zfcba/1）的情况下尝试了相同的操作。仍然是同样的问题。：（

Answer 1

将此添加到您的css

#above{position:absolute;}

Answer 2

z-index仅适用于absolute个定位元素。当浏览器忽略z-index的值时，它将按照html代码中元素的顺序呈现它。由于#content的代码晚于#nav，#content将显示在#nav上。

Floated DIV重叠不正确

2 个答案: