CSS issue with box shadow and floating box

Question

I have two divs floating next to each other, with the class name div1 and div2. I use shadow shadows to get a nice shadow on both divs. The problem is that I want the shadow from div1 to lie above div2 to get the feeling that div2 is sticking out due to div1. Now I get the shadow from div2 instead of div1. I hope you understand my problem. Can this be fixed?

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

This is 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 specify both background colors - the elements are transparent by default, which makes their shadows stick out one after another. To shift them onto each other, just use the z-indexCSS 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;
}

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

Answer 2

<style>
.container{
  position:relative;
}
.div1 {
    z-index:80;
    width:500px;
    height:500px;
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #aaa;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

.div2 {
    z-index:-10;
    position:absolute;
    width:500px;
    height:500px;
    float: left;
    left:560px;
    top:30px;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #333;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}
</style>
<div class="container">
  <div class="div1">asdf </div>
  <div class="div2">asd asdf</div> 
</div>

z-index , div , , , , , .