Two divs with drop shadow on same level

Question

I have two divs that have drop shadows and are on the same z-index.

They are currently both casting a shadow on each other.

I would like them to both cast shadows on the background but NOT on each other. How do I do this?

Answer 1

You can't have two different element with the same stacking level. Elements always have different stacking-levels. That's why your second Element shadows the first Element. (Without z-index the appearence in the DOM determines the stacking-level)

Z-index works only on non-static positioned elements (relative,absolute) so that won't help either.

IMO you can't achieve the effect you want without some little css-hacking (Declaring a non-static position on the elements combined with an additional wrapper-element - don't declare z-index on the parent but only on the child-elements).

Example

But please feel free to correct me if I am wrong.

Answer 2

Use this simple CSS trick, just create pseudoelement :after, set its z-index lower than divs and give a shadow to it. Following code will drop non-overlaping shadows under each div. Working example at http://jsfiddle.net/on38a8pz/1/.

div {
    position: relative;
}

div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 30px black;
    z-index: -1;
}