Two divs with drop shadow on same level

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?

Answers


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.


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;
}

Need Your Help

Making a <button> that's a link in HTML

html css button

Basically, I like the way that &lt;input type="submit"&gt; is styled, with the clickable button when you add a little CSS. However, regular buttons are not styled as such, they have no such clickab...

Using valgrind to find out how an object is still reachable

c memory-leaks valgrind

I use valgrind for memory leak detection. There was some code I was expecting to produce a memory leak, but valgrind did not detect it. Now I would like to find out in what way this object might st...