CSS z-index: “position: relative;” element on top of “position: fixed;” element - It will not work

Question

I have a dropdown menu in af fixed positioned header, where I want the dropdown box to appear in front of another fixed positoned element. I have tried with z-index on both elements, and I have checked, that both elements has a position.

See tis fiddle: http://jsfiddle.net/ng8u8zjx/1/

The dropdown box i showing behind the element containing the "+". I want it in the front.

    .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

You have to set z-index to container .dashboard-header .

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

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