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?
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).
But please feel free to correct me if I am wrong.
This recipe can be found in it's original form on Stack Over Flow.