Question

I have a container <div> that wraps around 5 other <div>s. I would like to apply a box-shadow: inset property to the container div, so it looks like all the elements within that container are beneath it and the shadow is ‘on top’ of them.

Problem is, it seems that the <div> elements within the container appear on top, and hide the shadow. I have tested the container <div> to ensure that the box-shadow effect is being applied properly by removing any one of the divs within it. I have also tried adjusting the z-index‘s of all of the elements in order to adjust what elements are on top of what.

Am I able to accomplish this effect using the HTML structure I have now? Would resorting to a position:absolute div positioned over the container be able to create this effect?

Please see example – http://jsfiddle.net/mDcKz/

Many thanks SO

Answer 1

Yes try this:

.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
pointer-events:none;
}