Divはjquery.innerfade.jsの画像の後ろに表示されますか？

Question

innerfade.jsスクリプトを使用して作成した画像スライドショーの前にCSSを使用して整形したdivを配置する際に問題が発生しました。http://medienfreunde.com/lab/innerfade/です。

divを使用してイメージロールオーバーを作成し、CSSを使用してマウスオーバー時に2番目のイメージに変更する背景イメージを設定しました。しかし、私はそれをスライドショーの上に置くと、背後になる。 divの位置をabsoluteに設定し、margin-topとmargin-leftプロパティを使用してdivを配置しています。

私の質問はこれです - 背景画像を含むdivがイメージスライドショーの前になるようにコードを変更するにはどうすればよいですか？

jsFiddleのボタンのコードはhttp://jsfiddle.net/Cwca22/SejUx/です。jquery.innerfade.jsスクリプトは、以前にリストされたWebサイトから見つけることができます。 （私はスクリプトのドキュメントに含まれている 'portfolio'の例を使用しています）

Answer 1

は.exploreButtonに大きなz-index値を適用してみてください。

.exploreButton { 
    background-image: url('http://f.cl.ly/items/0w082s253z2j1r3E3C3x/explore.png'); 
    background-repeat: no-repeat; 
    width: 216px; 
    height: 52px; 
    margin-top: 10px; 
    margin-left: 25px; 
    cursor: pointer; 
    z-index: 9999; // heres the trick 
} 

Answer 2

z-index CSSプロパティを見てください。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

あなたjsfiddleはあなたが記述スライドショーを持っていませんが、あなただけのスライドショーのそれよりも高いものに#exploreButton要素のz-indexを設定する必要があるようですね。

• https://developer.mozilla.org/en/Understanding_CSS_z-index
• https://developer.mozilla.org/en/CSS/z-index

ここでZインデックスを使用しての例です：http://jsfiddle.net/SejUx/1/