it's been a while! I am currently trying to solve a problem and I was hoping somebody could help me out. I have a fixed sidebar and a header. Both cast dropshadow. However, I don't want the header to cast shadow on the sidebar (I want them to be on the same level). At the same time, header contains drop-downs and these need to hover over everything. Since it's rather complex, I've created a jsfiddle.
I've been forced to paste the code here as well for some reason (SO input validation).
<div class="layout">
<div class="header z-depth-2">
<div class="dropdown-toogle">
<div class="dropdown-menu">
</div>
</div>
</div>
<div class="page-wrapper">
<div class="sidebar z-depth-2">
</div>
<div class="content">
</div>
</div>
</div>
And css
.layout {
width: 100%;
height: 100%;
position: relative;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: blue;
z-index: 101;
}
.sidebar {
position: fixed;
top: 70px;
left: 0;
width: 200px;
background-color: green;
bottom: 0;
z-index:101;
}
.content {
padding-left: 200px;
width: 100%;
height: 100%;
}
.page-wrapper {
padding-top: 70px;
height: 100%;
}
.dropdown-toogle {
margin-right: 100px;
float: right;
position: relative;
height: 100%;
width: 50px;
background-color: yellow;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
width: 400px;
height: 200px;
background-color: grey;
z-index:1000;
}
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
Notice how when you change view-port width, drop-down slides behind sidebar even when it's z-index is greater.
If I increase z-index of header, it starts casting shadow on the sidebar (drop-down starts working) which I want to avoid. I've been playing with different combination but was unable to sort it out properly.
Hope I managed to make it clear, help much appreciated!