下班后的z指数如何?

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;

参见Spec Wiki