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：之后是#content，以便阴影不会掉落在a.active：after之后。我怎么能这样做？

Answer 1

请尝试以下操作： Demo

我从#content中移除了box shadow并添加到#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的正确方法

1 个答案: