0

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

小提琴：http : //jsfiddle.net/Zfcba/

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）的情况下尝试了同样的方法。还是同样的问题。:(

4

2 回答 2

3

将此添加到您的CSS

#above{position:absolute;}
于 2013-06-30T19:38:27.277 回答
2

z-index仅适用于absolute定位元素。当浏览器忽略 的值时z-index，它会按照元素在您的 html 代码中的顺序呈现它。因为#content是在你的代码后面比#nav，#content才会显示过来#nav。

于 2013-06-30T19:39:33.050 回答