Why click event is not propagating?
<p>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?</p>

<p><strong>HTML:</strong></p>

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

<p><strong>JS:</strong></p>

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

    return true;
});
</code></pre>

<p>JSFiddle: <a href="http://jsfiddle.net/JuGx9/" rel="nofollow">http://jsfiddle.net/JuGx9/</a></p>

<p>Thanks!</p>
