problème CSS avec l'ombre de la boîte et la boîte flottante

Question

J'ai deux divs flottant à côté de l'autre, avec le nom de classe div1 et div2. J'utilise box-shadow pour obtenir une ombre agréable sur les deux divs. Le problème est que je veux l'ombre de div1 poser sur div2, pour obtenir le sentiment que div2 est collé derrière div1. Maintenant, je reçois l'ombre de div2 être sur place div1. Espérons que vous comprenez mon problème. Est-il possible de résoudre ce problème?

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

Ceci est le 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

Vous devez donner à la fois de la couleur de fond - éléments sont transparents par défaut, ce qui provoque leur ombre à « tenir le coup » derrière l'autre. Pour les poser sur l'autre, il suffit d'utiliser la propriété CSS z-index .

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

Voir: 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 plus élevé signifient que div sera sur le dessus, de sorte que vous pouvez régler selon le besoin, mais pour donner le sentiment exact, vous devrez peut-être jouer avec les couleurs, l'ombre sombre vs ombre légère.