Box-Shadow :before, :after z-index stacking problems

css, html, z-index

Solution

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/

Problem

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.

Original source

Related problems