title: css positioning z-index negative margins
body: <p>I have the following html - no matter what i do I cant seem to get the middle div to appear on top of the top and also on top of the bottom. It sits fine above the top but where i'd be expecting the bottom to sit below the middle the bottom actually sits on top. Any ideas ? Jsfiddle link below also .. thanks in advance !</p>
  
  <pre><code>    &lt;body&gt;
          &lt;div&gt;
              &lt;div id="tdiv" &gt;Top Div&lt;/div&gt;
              &lt;div id="connector"&gt;Middle Didv&lt;/div&gt;            
              &lt;div id="bdiv"&gt;Bottom Div &lt;/div&gt;
          &lt;/div&gt;        
      &lt;/body&gt;
  
  
  #tdiv{   
  
      height:200px; border:10px dotted black ;
      margin-bottom: -100px;   
      background:red;
  
  }
  
  
  
  #connector{
  
      height:200px;border:10px solid black;
      background:blue;
      margin-bottom: -100px;   
      z-index: 21;
  
  }
  
  #bdiv{
  
      border:21px dashed black;
      height:200px;
      z-index: 1;
      background:green;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/EWkMA/29/" rel="noreferrer">http://jsfiddle.net/EWkMA/29/</a></p>