：after中的z-index如何工作

Question

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

如您所见，便利贴的阴影消失了（它在另一个的后面）。 因此，对于顶部贴子，我添加了以下样式（增加了z-index ）：

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

检出此JSFiddle2以获取结果。 由于某种原因，阴影:after部分现在位于便利贴的顶部。 似乎z-index: 11不起作用。 有什么建议么？

Answer 1

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

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

Answer 2

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

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

参见规格Wiki