Geek asks and answers

Two divs with shadow at the same level

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

They are currently casting a shadow over each other.

I would like them to cast shadows in the background, but NOT at each other. How to do it?

+5
source share
2 answers

You cannot have two different elements with the same stacking level. Elements always have different stacking levels. This is why your second element obscures the first element. (Without a z-index, the appearance in the DOM determines the stacking level)

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

IMO css ( - - z-index , ).

, , , .

+8

CSS, :after, z- , divs, . div. 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;
}
+3

More articles:


All Articles