CSS Ebenen in Reihenfolge setzen

Question

Die Html unten beschreibt eine aktualisierte Version des Layouts, das ich von einer alten Website übertrage, die aus Bildern in Tabellen in reines CSS (oder so nah wie möglich) übersetzt werden soll.

<div id="mainContainer"> 
    <div class="topnav"> 
     <a href="#about"><span class="LpTopLink">Link4</a> 
     <a href="#contact"><span class="ETopLink">Link3</a> 
     <a href="#news"><span class="YpTopLink">Link2</a> 
     <a href="#home"><span class="HTopLink">Home</a> 
    </div> 
    <h1 class="titleA">Aspir...<span class="titleB">Fut...</span></h1> 
<div id="videoBox"> 
    <p> <span class="welcome">Welcome...<span></p> 
<p class="filmpar"> 
<a id="activator"><img src="images/Film-2.png" class="film"></a> 
Lots of text to do with the project, over 4 or five lines, with an image and some decorative text links...</p> 
<div id="activator2"> 
<div id="filmtxt"> link to film... </div> 
</div> 
</div> 
</div> 
<div id="page-wrapBody"> 
    <div class="div" id="one"></div> 
    <div class="div" id="two"></div> 
    <div class="div" id="three"></div> 
</div> 

Die drei farbigen Kästchen am Boden unter der (Schicht 3) sein sollten, aber ich kann nicht sie scheint zu bekommen unter gleiten und sitzen auf (Schicht 3)

Im Folgenden sind die CSS-Links ; der erste für die videoBox und der zweite für den wrapBody. Der WrapBody enthält das Detail der drei farbigen Boxen.

#videoBox { 
    font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; 
    float: right; 
    display: block; 
    border: solid 6px; 
    border-color: white; 
    border-radius: 25px; 
    color: black; 
    margin-top: -37; 
    text-align: left; 
    padding: 8px 26px; 
    text-decoration: none; 
    font-size: 17px; 
    background: -webkit-linear-gradient(#f5991c, #f5be74); 
    background-image: -ms-linear-gradient(#f5991c, #f5be74); 
    box-shadow: 0 7px 6px #cac9c8; 
    z-index:10; 
} 

wrapBody und farbige Kästchen

#page-wrapBody 
    { 
    width: 800px; 
    margin: 80px auto; 
    padding: 20px; 
    border-radius: 25px; 
    background: white; 
    -moz-box-shadow: 0 0 15px grey; 
    -webkit-box-shadow: 0 0 20px black; 
    box-shadow: 0 0 15px grey; 
    z-index:2; 
    } 
    .div 
    { 
     display:inline-block; 
     width:33%; 
     height:100%; 
     margin-top: -60px; 
     z-index:3; 
    } 
    #one { 
    background: -webkit-linear-gradient(#ddffcc, #fff); 
    background-image: -ms-linear-gradient(#ddffcc, #fff); 
    } 
    #two { 
    background: -webkit-linear-gradient(#ffccd4, #fff); 
    background-image: -ms-linear-gradient(#ffccd4, #fff); 
    } 
    #three { 
    background: -webkit-linear-gradient(#ccdeff, #fff); 
    background-image: -ms-linear-gradient(#ccdeff, #fff); 
    } 

Wenn die Bilder gezeigt wird, zeigt er, was dieses Codes erzeugt, aber ich brauche die farbigen Kästchen unter der Videobox (Layer3) zu sitzen und den Schatteneffekt bewahren . Jede Hilfe wird geschätzt!

Answer 1

Um den Z-Index zu verwenden, müssen Sie auch die position-Eigenschaft verwenden.

(emphasis Mine)

die z-Index CSS Eigenschaft gibt die z-Ordnung ein positioniertes Element und ihre Nachkommen. Wenn sich Elemente überschneiden, bestimmt z-Reihenfolge, welche die andere abdeckt. Ein Element mit einem größeren z-Index deckt im Allgemeinen ein Element mit einem niedrigeren ab.

[...]

Für eine Box positionierte (das heißt, eines mit einem anderen Position als statisches), die z-Index-Eigenschaft angibt:

1. den Stapel Pegel der Box im aktuellen Stapelkontext.
2. Gibt an, ob die Box einen lokalen Stapelkontext erstellt.

_{z-index | MDN}

Die Änderung Sie ist in #videoBox vornehmen müssen. Es würde nicht schaden, die gleiche Änderung zu machen, wo auch immer Sie z-index verwenden. Aber technisch müssen Sie nur die eine Einstellung vornehmen.

#videoBox { 
    ... 
    z-index:10; 
    position: relative; // add this line 
} 

Here is a rough example

---

Ein Kommentar zu Ihrem Code, erscheinen Sie 3-6 unclosed <span>-Tags auf den Leitungen zu haben. Dies kann zu Problemen führen, wenn Sie es so belassen.