CSS3 box-shadow für überlappende artig divs

Question

Ich versuche, diesen Effekt mit css3 zu erreichen:

Der HTML-Code ist sauber etwas wie

... 
<header> 
    ... 
</header> 

<div id="wrapper"> 
    ... 
</div> 
... 

und die CSS ist , im Moment, etwas wie

header { 
    display: block; 
    width: 900px; 
    height: 230px; 
    margin: 0 auto; 
    border: 1px solid #211C18; 
    ... 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

#wrapper { 
    width: 820px;  
    margin: 0 auto; 
    ... 
    border-right: 1px solid #211C18; 
    border-bottom: 1px solid #211C18; 
    border-left: 1px solid #211C18; 
    ... 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

Um das gewünschte Ergebnis zu erhalten, ich müssen:

1. die oberen Schatten des Haupt div (kein Problem damit) ausblenden
2. Header des unteren Schatten vor dem Haupt div bringen, und nicht hinter, wie es jetzt ist.

Ich habe viel über Box-Schatten gelesen, und ich habe keine Lösung gefunden, die mir wirklich gefällt ... Irgendeine Idee?

Answer 1

Diese jsfiddle macht was Sie wollen.

Die Art, wie es funktioniert, ist mit einem Hauptelement #wrap, das den Inhalt zentriert und eine Koordinatenkarte für das absolut positionierte Element #main erstellt. Dies geschieht aufgrund seiner Position: relative CSS-Regel. Sie enden mit den folgenden Auszeichnungs up:

<div id="wrap"> 
    <header></header> 
    <div id="main"></div> 
</div> 

The header dann innerhalb dieser und gegebene Position angeordnet ist: relativ und ein z-Index es eingerichtet über den #main Behälter zu stapeln.

Schließlich ist #main absolut unter der header positioniert. Das CSS sieht so aus:

/* centre content and create coordinate map for absolutely positioned #main */ 
#wrap { 
    width: 300px; 
    margin: 20px auto; 
    position: relative; 
} 

header, #main { 
    background: #fff; 

    /* rounded corners */ 
    border: 1px solid #211C18; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  

    /* dropshadows */ 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

header { 
    display: block; 
    width: 300px; 
    height: 50px; 

    /* stack above the #main container */ 
    position: relative; 
    z-index: 2; 
} 

#main { 
    width: 200px; 
    height: 70px; 

    /* stack below the header and underlap it...if that's even a word */ 
    position: absolute; 
    z-index: 1; 
    top: 40px; 
    left: 50px; 
} 

Answer 2

Ich hatte nur etwas Glück mit relativer Positionierung.

Zum Beispiel.

1. div hat einen Box-Schatten und einen unteren Rand. 2. div schiebt sich unter den Schatten.

#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;} 
#seconddiv {width: 960px; position: relative; top: -10px;} 

Es ist nicht die beste Lösung, aber es funktioniert für mich.

Answer 3

Einstellung Position auf "relativ" wird bereits das Problem lösen!