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

J'ai deux divs flottants l'un à côté de l'autre, avec le nom de classe div1 et div2. J'utilise box-shadow pour obtenir une belle ombre sur les deux divs. Le problème est que je veux que l'ombre de div1 se trouve sur div2, pour avoir l'impression que div2 dépasse derrière div1. Maintenant, je reçois l'ombre de div2 pour être sur div1 à la place. J'espère que vous comprenez mon problème. Est-il possible de réparer ça?Problème CSS avec l'ombre de boîte et la boîte flottante

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

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

Source

2010-09-01 Martin

n'utilisez pas CSS pour cela. Utilisez des images et des divs imbriqués à la place. – rochal

Pourquoi je ne peux pas utiliser CSS? – Martin

Vous devez donner les deux la couleur d'arrière-plan - éléments sont transparents par défaut, ce qui provoque leur ombre à « décollées » derrière l'autre. Pour les recouvrir, utilisez simplement 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/

Source

2010-09-01 15:31:40

Cela ne répond pas à la question. Nous voulons que div1 apparaisse à l'avant et z-index ne fonctionne pas pour les ombres. – Steve

@Steve Excusez-moi? La solution a évidemment fonctionné pour le PO, sinon il ne l'aurait pas marqué comme accepté. Si ça ne marche pas pour * vous *, alors évidemment vous avez une question différente ici. –

Ensuite, quelqu'un devrait corriger la question, car c'est assez clair pour moi "Le problème est que je veux que l'ombre de div1 soit sur div2, pour avoir l'impression que div2 dépasse derrière div1." J'ai essayé votre solution dans FF et Chrome sans chance. – Steve

<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 moyen plus élevé 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 couleurs, ombre noire vs ombre légère.

Source

2010-09-01 15:41:47

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

Répondre

Questions connexes