How can I make sure that children do not cover the insertion shadow?

Question

I have a div element with some children, and I'm trying to apply a shadow insertion, the children seem to cover the window shadow, here is a jfiddle example: jsFiddle Demo

If you remove background-color in the optn class, you will see an insertion shadow there, so my code valid. So the questions are, how can I make the children appear under the shadow box?

Answer 1

http://jsfiddle.net/wdYpv/3/

Move the background color to the parent.

Answer 2

If you have the same problem, find half the solution (works well if you don't have scroll inside).

You can put the background in the element under the shadow by placing it inside: before or: after the pseudo-class and setting it to z-index: -1. It will perform a background image.

But this will create a new problem: for the position: before the element you will need to apply the element .optn "position: relative;" and if you apply "position: relative"; to him, he will begin to show from the rounded corners in Webkit browsers.

If you don’t have a scroll inside, you can fix it by rounding the corners, if the first and last .optn element are bits, if you want to scroll this content, then you, unfortunately, cannot do this.

Anyway, there is an example: http://jsfiddle.net/qN99W/

Answer 3

you can add an add as follows: http://jsfiddle.net/jalbertbowdenii/wdYpv/2/

Answer 4

If I understand your own goal correctly, you already have the answer to your question. ;-) Remove the background color from optn and add it instead of optn-group .

As you already found out, if you have a different background color for optn on hover or active, it is still on top of this insert shadow. An easy and perhaps lazy solution is to not change the background color for them, but use text color and other effects (for example, a shift of 1px down). Or, if you need a border radius, but for these special cases (hovering, activity) you can live without a shadow, just set the boundary radii accordingly.

In addition, do not let the world motivate you to think that it is only because we have great new CSS tools that you can no longer use images. What you REALLY want to do may be even easier with the images.

Look at the pink scissors effect on numerous web pages and it is still made using one or more transparent PNGs.