Question

I have two divs floating next to each other, with class name div1 and div2. I use box-shadow to get a nice shadow on both divs. The problem is that I want the shadow from div1 to lay over div2, to get the feeling that div2 is sticking out from behind div1. Now I get the shadow from div2 to be over div1 instead. Hope you understand my problem. Is it possible to fix this?

<div class="div1"></div>
<div class="div2"></div>

This is the css:

.div1 {
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

.div2 {
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

Answer 1

You need to give both of the a background color – elements are transparent by default, thus causing their shadows to “stick out” behind each other. To lay them over each other, simply use the z-index CSS property.

.div1 {
    z-index: 99;
}

.div2 {
    z-index: 100;
}

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    background-color: white;
    margin-right: 5px;

    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
    box-shadow: 0px 0px 80px #A0A0A0;
}

See: http://www.jsfiddle.net/wspDP/4/