元素不与z-index重叠

Question

在导航中，我有一个突出的红色框。我希望该红色框与所有Divs重叠。我为其设置了一个边距，以便将其与我放入黑盒中的其他元素隔开。问题在于它的边距还会影响单独元素的子元素的布局。当我向以下部分的子元素添加负边距时，它确实重叠了，但是我希望红色框位于顶部。我使用z-index，它似乎不起作用。

这是我在Jsfiddle上的示例：http : //jsfiddle.net/1qsuvhnd/29/

的HTML

<nav>
    <div id="ribbon"></div>    
</nav>
<div id="context">
    <div class="link"></div>
</div>

的CSS

#context {
    width: auto;
    padding: 20px;
    height: 300px;
    background-color: blue;
    z-index: 1;
}
#context .link {
    float: Left;
    height: 260px;
    width: 300px;
    margin-left: -140px;
    background-color: White;
    z-index:1 !important;
}
nav {
    width: auto;
    height: 65px;
    background-color: black;
    z-index:99 !important;
    clear:both;
}

nav #ribbon {
    float: left;
    margin: 0px 50px;
    Width: 65px;
    height: 130px;
    background-color: red;
    z-index= 99;
}

Answer 1

要使用的z-index，你需要指定一个position（如absolute，fixed或relative）。

而最后一行写错了：

z-index = 99;

正确的编写方式是：

z-index: 99;