jQueryを含むDivが別のdivの後ろに重ならない

Question

Jqueryを含むdivのセンタリングに問題があります。 それは他のすべてのコンテンツの後ろのヘッダーになっているはずですが、私はそれを入手できません。 私はz-indexと位置の変種を試しましたが、どれも機能しません。

誰かが間違っていることを教えてもらえますか？

は、ここに私のコードです：

Code JSFiddle

HTML：

<div id="container"> 
<div id="mads"></div> 
<div id="slideshow"> 
    <img src="image1.jpg" alt="Slideshow Image 1" class="active" /> 
    <img src="image2.jpg" alt="Slideshow Image 2" /> 
    <img src="image3.jpg" alt="Slideshow Image 3" /> 
    <img src="image4.jpg" alt="Slideshow Image 4" /> 
</div> 

はCSS：

#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; 
} 

JS：

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); 
}); 

EDIT：

問題が解決される： 私はjQueryと絶対位置とzインデックス上記他のDIVを含んDIVを得ました。今、divは互いに背後に位置しています。

Answer 1

ここには動作するバージョンがあります。
http://jsfiddle.net/marqs/cn8UJ/

コードが

1）ヘッダは<header> -tag、ないDIVする必要があります（私は、彼らが意図せずしている推測しているか、とても奇妙ソリューション）問題のカップルを持っていました。あなたはdiv内にスクリプトを置くことができますが、通常はあまり意味がありません。あなたがCMSのようなDOMの特定の部分にしかコードを注入できない場合を除いて、まあまあです。

2）あなたのコードは単に定義された関数であり、setIntervalは決して呼び出されませんでした。あなたはおそらく、やりたかったことは

$(document).ready(function() { 
// this code gets run when DOM is loaded 
setInterval(slideSwitch, 5000); 
}); 

だったこれは、DOMの準備ができたときにトリガーされるイベントリスナーをバインドします。これは、通常、コードを実行する時間です。