CSS z- 색인 : "위치 : 상대적;" "position : fixed;"의 맨 위에있는 요소 요소 - 작동하지 않습니다

Question

고정 된 위치에있는 머리글에 드롭 다운 메뉴가 있습니다. 여기서 드롭 다운 상자를 다른 고정 된 위치에있는 요소 앞에 표시해야합니다. 두 요소 모두에서 z- 인덱스를 시도했으며 두 요소 모두 위치를 확인했습니다. 내가 "+"를 포함하는 요소 뒤에 보여주는 http://jsfiddle.net/ng8u8zjx/1/

드롭 다운 상자 :

은 TIS 바이올린을 참조하십시오. 나는 그것을 앞에두고 싶다.

.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

을 컨테이너 .dashboard-header으로 설정해야합니다.

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

바이올린 : 오프 물론 http://jsfiddle.net/ng8u8zjx/2/