title: CSS Scrolling and Z-index
body: <p>I am currently laying out the design to a webpage with a top horizontal bar that has a shadow at the bottom and 2 divs below that are set to overflow:scroll;</p>
  
  <p>Normally it looks like this: <a href="https://31.media.tumblr.com/12b6c3f5a3642440010ae86565699d41/tumblr_nfgqskuhsa1tllj9bo1_1280.png" rel="nofollow">https://31.media.tumblr.com/12b6c3f5a3642440010ae86565699d41/tumblr_nfgqskuhsa1tllj9bo1_1280.png</a></p>
  
  <p>but the left div is covering the shadow part, so I changed the z-index to be -1
  which now gives me this: <a href="https://31.media.tumblr.com/d18f3476db91b54282d9b0bf8ed08a80/tumblr_nfgqskuhsa1tllj9bo2_1280.png" rel="nofollow">https://31.media.tumblr.com/d18f3476db91b54282d9b0bf8ed08a80/tumblr_nfgqskuhsa1tllj9bo2_1280.png</a>
  which is what I want it to look like but then the left div doesn't scroll anymore. </p>
  
  <p>I tried putting positive numbers with z-index of top being 5 and the left z-index to be 4, but it doesn't send the left div to the back.</p>
  
  <p>How can I have the shadow to overlap the left div but have the left div still be scrollable?</p>
  
  <p>Here is my code:</p>
  
  <p>Html:
      
      
      
      </p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="top"&gt;
  &lt;div id="logo"&gt;Baby Steps&lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;div id="left"&gt;
  a&lt;br&gt;&lt;br&gt;
  a&lt;br&gt;&lt;br&gt;
  a&lt;br&gt;&lt;br&gt;
  a&lt;br&gt;&lt;br&gt;
  a&lt;br&gt;&lt;br&gt;
  a&lt;br&gt;&lt;br&gt;THESE GO ON&lt;/div&gt;
  
  
  &lt;div id="right"&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:
      body
      {
      margin:0;
      padding:0;
      }</p>
  
  <pre><code>#top{
  width: 102%;
  float: left;
  margin: 0 0 0 0;
  padding: 0;
  background-color: #41b6c4;
  height:60px;    
  box-shadow: 0px 5px 5px -3px #000;
  
  }
  
  
  #logo{
  color:white;
  font-family: 'Roboto Condensed', sans-serif;
  font-size:2em;
  margin:0.2em;
  
  
  }
  
  
  #left{
  position: relative;
  top: 0px;
  height:100%;
  width:18%;
  background-color:#606061;
  overflow: scroll;
  }
  </code></pre>