Question

我有这个漂亮的css3 post-it（JSFiddle）。但是，在我的应用程序中，它们有时可以相互叠加，如下所示：JSFiddle1

正如你所看到的，后贴的阴影消失了（它落后于另一个）。所以，对于post-it，我添加了以下样式（我增加了z-index）：

.on-top {
    z-index: 11;
}
.on-top:after {
    z-index: 10;
}

结帐JSFiddle2查看结果。出于某种原因，阴影:after部分现在位于帖子之上。似乎z-index: 11不起作用。有什么建议吗？

Answer 1

使用z-index时，您可以创建分层上下文。该上下文中的所有其他z-index es相对于彼此解析，然后该容器中的所有内容都被视为具有容器z-index的单个“层”。

尝试将z-index:-1应用于阴影。这似乎是违反直觉的，但现在它将出现在容器元素的后面，但整个“带阴影的容器”将应用于该父元素的z-index:10。

Answer 2

为了使z-index属性有效，必须在同一组花括号{}中指定以下其他属性之一：

position: fixed;
position: absolute;
position: relative;