title: Div with background color overlaps div with links
body: <p>I am having a little bit of problem with two divs using <code>z-index</code>. I have created a <code>div</code> called topbar with <code>z-index: 1</code>, and another one called "socialbuttons" with <code>z-index: 2</code> which has image links to Facebook and Twitter. However, the topbar overlaps the soc buttons and I can neither see nor click the social buttons. I have scoured the internet and tried everything I could but I am still stuck with the same issue. Any help would be greatly appreciated. Here is my HTML code</p>
  
  <pre><code>&lt;div id ="topbar" 
      style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;"&gt;
  &lt;/div&gt;
  
  &lt;div id= "socialbuttons" 
      style= "position:relative; z-index: 1000; top: 15px; left: 770px; height:53px; width: 249px; margin-bottom: 0px;"&gt;
  
      &lt;a href="https://twitter.com" target="_blank"&gt;
  
      &lt;img alt="" src="images/twitter.png" 
  
  
          style="position:absolute; top: 0px; left:40%; height:49px; width: 59px; z-index:1000"/&gt;&lt;/a&gt;&lt;a href="https://www.facebook.com" target="_blank"&gt;&lt;img alt="" src="images/fbook.png" 
  
  style="position:relative; width:50px; height:49px; top: 0px; z-index:1000"/&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mrvijayakumar/BQBaV/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>