为什么点击事件没有传播？

Question

Attached a Header with a (kinda) close button (in red) moc-up. When I click on the close button (the area that overlaps with a header) - nothing happens. Can you please advice on the correct solution regarding the subject?

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/

Thanks!

Answer 1

This element ( <div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> ) seems to be occupying the same space and is taking the click event, rather than the #cls_btn div. Applying a z-index CSS property with a value of 999 fixes the issue.

Working DEMO

Answer 2

Your 'my_header' cover it. change the rows to:

<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 3

The "my_header" div is overlapping the "cls_btn" div. Look at this: http://jsfiddle.net/JuGx9/13/

To solve this without the z-index property change the order of the divs...

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