なぜクリックイベントが伝搬していないのですか？

Question

（ちょっと）のクローズボタン（赤色）のモックアップでヘッダーを添付しました。閉じるボタン（ヘッダーと重なる部分）をクリックすると何も起こりません。あなたはその問題に関する正しい解決法に関するアドバイスをお願いできますか？

HTML：

<div id="my_body" style="background:rgba(0, 0, 0, 0.6);padding:10px;"> 
    <div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div> 
    <div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> 
    <div id="pic_area" style="border:2px solid #b3b3b3;margin-top:10px"> 
     <img id="pic" src="http://never.mind.which.pic.com" > 
    </div> 
</div> 

JS：

$("#cls_btn").bind("click", function() { 
    alert("clicked!"); 

    return true; 
}); 

JSFiddle：http://jsfiddle.net/JuGx9/

ありがとう！

Answer 1

あなたの 'my​​_header' それをカバーしています。 "my_header" DIV "はcls_btn" のdivを重ねている

<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> 
<div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div> 

Answer 2

この要素（<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>）は、同じ領域を占めているようで、#cls_btnではなくclickイベントを取っているようです。 999の値を持つz-index CSSプロパティを適用すると、問題が修正されます。

Working DEMO

Answer 3

：に行を変更 。これを見て：http://jsfiddle.net/JuGx9/13/

div要素の順序を変更するのz-indexプロパティなしでこの問題を解決するには...

http://jsfiddle.net/JuGx9/15/