The right way to set z-index - css

Question

I have that html
<div id="menu">
<a class="active"></a>
</div>
<div id="content"></div>
And that css
#menu {
position:absolute;
z-index:1;
}
#content {
position:absolute;
z-index:2;
text-shadow: -10px 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);
}
#menu a.active:after {
position:absolute;
z-index:3;
text-shadow: -10px 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);
}
I want a.active:after was above then #content so that the shadow does not dropped on the a.active:after. How i can do this?

Answer 1

Try like this: Demo
I removed box shadow from #content and added to #menu as inner shadow.
CSS:
#menu {
position:absolute;
z-index:7;
width:200px;
height:100%;
background:green;
box-shadow:inset -10px 3px 10px rgba(0, 0, 0, .23), inset 0 3px 10px rgba(0, 0, 0, .16);
overflow:hidden;
}
#menu a.active {
padding:5px;
background:#fff;
display:block;
margin-top:20px;
z-index:9;
}
#content {
position:absolute;
z-index:3;
width:100%;
height:100%;
background:yellow;
left:200px;
}
#menu a.active:after {
content:"";
position: absolute;
width: 24px;
height: 24px;
background: yellow;
transform: rotate(45deg);
/* Prefixes... */
top: 21px;
right: -11px;
box-shadow: -10px 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
}