title: How is it possible to overlay images with a relative position?
body: <p>I need to keep my images relative so they are in the right place in the div but I can't get the z-index to work! This is my html code:</p>
  
  <pre><code>&lt;img src="images/banners/banner1.jpg" class="banner" /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div id="social_cont"&gt;
      &lt;div id="social"&gt;
      Hello!!
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css:</p>
  
  <pre><code>.banner {
      position: relative;
      z-index: 0;
  }
  
  #social_cont {
      text-align: center;
      z-index: 10;
  }
  #social {
      position: relative;
      z-index: 10;
  }
  </code></pre>
  
  <p>At the moment all I get is the banner and then the text centered underneath it, why is this?</p>