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;
}
You have to set z-index
to container .dashboard-header
.
.dashboard-header {
z-index: 2;
}
Fiddle: http://jsfiddle.net/ng8u8zjx/2/