Box-Shadow: before ,: after z-index styling issues

Question

So, I played with both shadows, I did something similar recently, and it worked perfectly. Then he suddenly stopped working for no apparent reason!

What I'm trying to do is to have a simple div box with double shadows at the bottom to make it look bent.

If you check this in jfiddle http://jsfiddle.net/TJuDu/ , you will see all the code I made. The problem is stacking the: before and: after elements, they are positioned correctly, but the stacking is wrong, the shadows are behind div.layout, when they should be displayed explicitly behind the .box div. If I remove the z-index value, I see shadows located above the div.box.

The fact is that I did just that on another page, and it worked, and suddenly it stopped working on this page, and I did it with this example.

Answer 1

The second answer to this question actually explains the problem well: Is it possible to set the stack order of pseudo-elements under their parent element?

What you need to do is use .box as a wrapper, for example:

 <div class="box"> <div class="pseudo-box"> <h3>Awesome Box Title!</h3> <p class="box-text">This is a box!</p> </div> </div> 

Then for CSS, apply the following to .box :

 position:relative; z-index: 2; 

(or something else for the z-index), and the rest of the styles should be applied to the .pseudo-box , which should have position: relative; but not z-index.

Finally :before and :after should be associated with .pseudo-box , not .box

See how it works: http://jsfiddle.net/cchana/TJuDu/1/