title: Div that contains jQuery won't center behind another div
body: <p>I'm having trouble with centering of a div that contains Jquery.
  It supposed to be the header behind all other content, but I can't get it there.
  I tried z-index and variants of positions, but none of them works.</p>
  
  <p>Can someone tell me what i'm doing wrong?</p>
  
  <p>Here's my code:</p>
  
  <p><a href="http://jsfiddle.net/vr8wG/" rel="nofollow">Code JSFiddle</a></p>
  
  <blockquote>
    <p>HTML:</p>
    
    <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="mads"&gt;&lt;/div&gt;
  &lt;div id="slideshow"&gt;
      &lt;img src="image1.jpg" alt="Slideshow Image 1" class="active" /&gt;
      &lt;img src="image2.jpg" alt="Slideshow Image 2" /&gt;
      &lt;img src="image3.jpg" alt="Slideshow Image 3" /&gt;
      &lt;img src="image4.jpg" alt="Slideshow Image 4" /&gt;
  &lt;/div&gt;
  </code></pre>
    
    <p>CSS:</p>
    
    <pre class="lang-css prettyprint-override"><code>#slideshow {
      height:350px;
      width:1100px;
      z-index:9;
  }
  
  #slideshow IMG {
      position:absolute;
      top:0;
      left:0;
      z-index:8;
      opacity:0.0;
  }
  
  #slideshow IMG.active {
      z-index:10;
      opacity:1.0;
  }
  
  #slideshow IMG.last-active {
      z-index:9;
  }
  
  body{
      background-color:#000;
  }
  
  #container{
      width:1124px;
      height:768px;
      margin-left:auto;
      margin-right:auto;
  }
  
  #mads{
      width:1124px;
      height:768px;
      margin-left:auto;
      margin-right:auto;
      background-image:url(file:///schijfje/Users/502034/Desktop/mappen/Stage/03.%20Mads%20Wittermans/web.png);
  
      background-repeat:no-repeat;
      z-index:100;
  }
  
  .header{
      margin-left:auto;
      margin-right:auto;
      z-index:1;
      position:absolute;
  }
  </code></pre>
    
    <p>JS:</p>
    
    <pre class="lang-js prettyprint-override"><code>function slideSwitch() {
      var $active = $('#slideshow IMG.active');
  
      if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  
      var $next =  $active.next().length ? $active.next()
          : $('#slideshow IMG:first');
  
      $active.addClass('last-active');
  
      $next.css({opacity: 0.0})
          .addClass('active')
          .animate({opacity: 1.0}, 1000, function() {
              $active.removeClass('active last-active');
          });
  }
  
  $(function() {
      setInterval( "slideSwitch()", 5000 );
  });
  </code></pre>
  </blockquote>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Issue is solved:
  I gave the div that contains jQuery and the other div above a absolute position and a z-index. Now the divs are positioned behind each other.</p>