title: CSS putting layers in order
body: <p>The Html below describes an updated version of layout I'm transferring from an old website that needs to be translated from images held in tables to pure CSS (or as close as I can get).</p>
  
  <pre><code> &lt;div id="mainContainer"&gt;
      &lt;div class="topnav"&gt;
        &lt;a href="#about"&gt;&lt;span class="LpTopLink"&gt;Link4&lt;/a&gt;
        &lt;a href="#contact"&gt;&lt;span class="ETopLink"&gt;Link3&lt;/a&gt;
        &lt;a href="#news"&gt;&lt;span class="YpTopLink"&gt;Link2&lt;/a&gt;
        &lt;a href="#home"&gt;&lt;span class="HTopLink"&gt;Home&lt;/a&gt;
      &lt;/div&gt;
      &lt;h1 class="titleA"&gt;Aspir...&lt;span class="titleB"&gt;Fut...&lt;/span&gt;&lt;/h1&gt;
  &lt;div id="videoBox"&gt;
    &lt;p&gt; &lt;span class="welcome"&gt;Welcome...&lt;span&gt;&lt;/p&gt;
  &lt;p class="filmpar"&gt;
  &lt;a id="activator"&gt;&lt;img src="images/Film-2.png" class="film"&gt;&lt;/a&gt;
  Lots of text to do with the project, over 4 or five lines, with an image and some decorative text links...&lt;/p&gt;
  &lt;div id="activator2"&gt;
  &lt;div id="filmtxt"&gt; link to film... &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="page-wrapBody"&gt;
    &lt;div class="div" id="one"&gt;&lt;/div&gt;
    &lt;div class="div" id="two"&gt;&lt;/div&gt;
    &lt;div class="div" id="three"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The three coloured boxes at the bottom should be under the  (layer 3) but I can't seem to get them to slide under and sit on  (layer 3)</p>
  
  <p>Below are the CSS links; first one for the videoBox and the second for the wrapBody. The wrapBody contains the detail of the three coloured boxes.</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>wrapBody and coloured boxes</p>
  
  <pre><code>#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);
    }
  </code></pre>
  
  <p>If the images is shown, it shows what this codes produces, but I need the coloured boxes to sit under the videoBox (layer3) and preserve the shadow effect. Any help is appreciated!
  <a href="https://i.stack.imgur.com/jQWRS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jQWRS.jpg" alt="layers"></a></p>