元素不與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;

Answer 2

怎么樣： http : //jsfiddle.net/1qsuvhnd/30/

將功能區更改為位置：絕對； 並修復z-index = typo：D

現在您不需要那種保證金破解了！！

nav #ribbon {
    float: left;
    margin: 0px 50px;
    Width: 65px;
    height: 130px;
    background-color: red;
    z-index: 99;   /* take that equal out and make it a colon */
    position: absolute;  /* position: absolute to the rescue!!!! */
}

Answer 3

您需要為nav div指定位置CSS規則，以使z-index正常工作，如下所示：

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

這是新的jsFiddle鏈接： http : //jsfiddle.net/1qsuvhnd/54/