如何设置阴影的z-index（CSS）

Question

说我有一个带z-index的盒子：4 + CSS阴影。 假设我有另一个带z-index的框：2;

如何使对象1的阴影位于对象2的顶部？

Answer 1

以下是您要找的内容的示例

HTML

<div id="shadow"> </div>
<div id="under"> </div>

CSS

#shadow {
    background-color: #35BFFF;
    height: 300px;
    width: 100px;
    -moz-box-shadow: 0px 0px 11px rgba(0,0,0,1);
    -webkit-box-shadow: 0px 0px 11px rgba(0,0,0,1);
    box-shadow: 0px 0px 11px rgba(0,0,0,1);
    float: left;
    z-index: 999;
    position: relative;
}
#under {
    float: left;
    height: 300px;
    width: 100px;
    background-color: red;
    position: relative;
}
​

<强> Live demo

Answer 2

阴影的顺序，即哪个阴影落在哪个div上，由div的z-index设置，如果这就是你所要求的，则不能单独设置。

具有较大z-index的div将位于z-index较低的div之上，并将在其上投射阴影。

我的homepage有两个带阴影和不同z-index es的div。您可以调整浏览器窗口的大小，使它们重叠并为自己查看效果。

Answer 3

将对象1放在对象2上，对象1的底部不应有阴影。