：after中的z-index如何工作

Question

I have this nice css3 post-it ( JSFiddle ). However, in my application they can sometimes be on top of each other, like this: JSFiddle1

As you can see, the shadow of the post-it is gone (it's behind the other one). So, for the post-it on top, I added the following styles (I increased the z-index ):

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

Checkout this JSFiddle2 for the result. For some reason the shadow :after part is now on top of the post-it. It seems that the z-index: 11 doesn't work. Any suggestions?

Answer 1

When using z-index , you create a layering context. All other z-index es inside that context are resolved with respect to each other, and then everything in that container is treated as a single "layer" with the container's z-index .

Try applying z-index:-1 to the shadow. It seems counter-intuitive, but it will now appear behind the container element, but the whole "container with its shadow" will be applied with the z-index:10 of that parent.

Answer 2

In order for the z-index property to work, you must specify one of the following additional properties within the same set of curly brackets {}:

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

See the Spec Wiki