html - CSS z 索引 : "position: relative;" element on top of "position: fixed;" element - It will not work

Question

我在 af 固定定位标题中有一个下拉菜单，我希望下拉框出现在另一个固定定位元素的前面。 我已经尝试在两个元素上使用 z-index，并且我已经检查过，两个元素都有一个位置。

参见 fiddle :http://jsfiddle.net/ng8u8zjx/1/

下拉框显示在包含“+”的元素后面。我想要它在前面。

    .dashboard-header {
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        background-color: #FF555F;
    }
...
    .dashboard-header .user-menu ul ul {
        display: none;
        background-color: #FF555F;
        height: auto;
        text-align: center;
        z-index: 10;
        position: relative;
    }
...
    /* ADD NEW START */
    article.content header a.add-new {
        color: #FFF;
        line-height: 32px;
        text-align: center;
        background-color: #FF555F;
        border-radius: 5px;
        width: 30px;
        height: 30px;
        display: block;
        position: fixed;
        right: 10px;
        top: 60px;
        font-size: 22px;
        text-decoration: none;
        z-index: 1;
    }

Answer 1

您必须将 z-index 设置为容器 .dashboard-header。

.dashboard-header {
    z-index: 2;
}

fiddle :http://jsfiddle.net/ng8u8zjx/2/