设置z-index的正确方法

Question

我有那个html

<div id="menu">
    <a class="active"></a>
</div>
<div id="content"></div>

还有那个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);
}

我希望 a.active:after 位于 #content 之上，这样阴影就不会落在 a.active:after 上。我该怎么做？

Answer 1

这样试试：Demo

我从#content 中删除了框阴影并添加到#menu 作为内阴影。

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);
}

设置z-index的正确方法

The right way to set z-index

css

z-index

shadow