Question

So i’ve been playing around a both with box-shadows, i recently did something just like this and it worked perfect. Then all of a sudden it stopped working for no apparent reason!

What i’m trying to do is have a simple div box with dual shadows underneath to make kind of folding effect.

If you check it out at jfiddle http://jsfiddle.net/TJuDu/ you can see all the code i’ve done. The problem is the stacking of the :before and :after elements, it’s positioned properly but the stacking is wrong, the shadows are behind the .layout div when they should clearly be showing behind the .box div. If i remove the z-index value i can see the shadows positioned above the .box div.

The thing is i did exactly like this on another page and it worked, then all of a sudden it stopped working on that page and on this example i made.

Answer 1

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

What you need to do is to use .box as a wrapper like so:

<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 the CSS, apply the following to .box:

position:relative;
z-index: 2;

(or whatever is relevant for the z-index) and the rest of your styles should be applied to .pseudo-box, which should have position: relative; but no z-index.

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

See it working here: http://jsfiddle.net/cchana/TJuDu/1/