jQuery - マージンのためにDOM内のアイテムをクリックできない

Question

フッタにmargin: -107px 0 0 0;スタイルが適用されているため、jQueryがフッタ内のイメージをクリックするのに問題があります。なぜ私はウェブサイトを調べるときにDOMのイメージを見ることができるので、これが問題を引き起こしているのか分かりません。私はフッタに "Grilled Chicken Pesto Sandwich"という言葉を強調表示するのに問題があることに気付きました。これはまたフッタにmargin: -107px 0 0 0;スタイルが適用されているためです。

Link to website

//jQuery 
$("footer #thumbs ul li figure img").click(function() { 
    var id = $(this).attr('id'); 
    $.backstretch(images[id]); 
    $('html').css('background-size', 'cover');  
}); 

//css 
footer { 
    margin: -107px 0 0 0; //The -107px is causing the problem 
    width: 100%; 
    height: 107px; 
    background: url(../img/bottom.png) repeat-x; 
} 

//html 
<footer> 
    <div id="thumbsDesc">Grilled Chicken Pesto Sandwich</div> 
    <div id="thumbs"> 
    <ul> 
     <li><figure><img id="0" src="img/01.jpg"></figure></li> 
     <li><figure><img id="1" src="img/02.jpg"></figure></li> 
     <li><figure><img id="2" src="img/03.jpg"></figure></li> 
     <li><figure><img id="3" src="img/04.jpg"></figure></li> 
    </ul> 
    </div> 
</footer> 

Answer 1

ラッパークラスのz-indexを小さくする必要があります。これをfirebugで試してみましたが、テキストを選択して画像をクリックすることができました。足のz-インデックスを増やす必要はありません 私はラッパーに-10を使用しました

編集：ラッパーで相対位置を削除すると、すべてのブラウザーに最適と思われるものを実行することもできます。唯一のdivのためにFF

Answer 2

div class="wrapper"がフッターをオーバーレイように見えます。 （フッタのz-indexを変更してみてください） - 動作しません。申し訳ありません。フッターをラッパーの内側に配置してください。

Answer 3

にこれをプレイし、私はid="thumbs"は、画像のユーザーのダウンロード2.5メガバイトは非常に貧弱な負荷性能につながる作り、注意点として

position: absolute; 
z-index: 1; 
left: 120px;