4

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.

Christoffer Palm
  • 43
  • 2
  • 6

1 Answers1

7

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/

Community
  • 1
  • 1
cchana
  • 4,899
  • 3
  • 33
  • 43
  • Thanks for the help! It's so weird that i got it working with a single container a few days ago. This solution seems to be working great so thumbs up :) – Christoffer Palm Jun 22 '12 at 10:09
  • I've been trying like crazy to incorporate Nicolas Gallagher's tricks here: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ But no luck, until I tried your method of adding another wrapper to my div who's shadow I'm trying to render, and control its z-index. Thank you! – Shiprack Oct 19 '12 at 09:11