Question

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

显示在包含＆＃34; +＆＃34;的元素后面的下拉框。我想要它在前面。

    .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;
}

小提琴：http://jsfiddle.net/ng8u8zjx/2/

CSS z-index：＆＃34; position：relative;＆＃34;元素位于＆＃34;位置：固定;＆＃34;元素 - 它不会起作用

1 个答案: