alert of second div behind the first div
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/8134669/trigger-click-on-lower-element-z-index">Trigger click on lower element (z-index)</a>  </p>
</blockquote>



<p>I am working on an application in which two divs are overlaping. First div is above the second div with z- index. 
I want that when i click on overlapping region it should give alert of second div which is behind the first div. My code is below:-</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"&gt;
        &lt;title&gt;Click Through a DIV to Underlying Elements&lt;/title&gt;
        &lt;style type="text/css"&gt;
            .sample {
                position:absolute;
                top:100px;
                left:100px;
                height:600px;
                width:600px;
                border: 5px #000 solid;
                pointer-events:none;
                /* THIS IS THE TRICK YOU SEEK */
                background:blue;
            }
        &lt;/style&gt;
        &lt;!-- Include he following conditional to get click-throughs to
        work with IE --&gt;
        &lt;!--[if IE]&gt;
            &lt;style type="text/css"&gt;
                .sample {
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample_600x600.png', sizingMethod='scale');
                    background:none !important;
                }
            &lt;/style&gt;
        &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;!-- Below is the "BACKGROUND DIV" --&gt;
            &lt;div id="first" onclick="alert(this.id);" style="position:absolute;top:200px;left:200px;pointer-events:visible;z-index:100;width:143px;height:83px;overflow:hidden;border: 1px green dashed; background:url(7a.png);"&gt;&lt;/div&gt;
            &lt;div id="second" onclick="alert(this.id);" style="position:absolute;top:152px; left:265px;width:143px;height:83px;overflow:hidden;border: 1px #900 dashed;pointer-events:visible; background:url(6a.png);"&gt;&lt;/div&gt;
            &lt;!-- click-through-a-div-to-underlying-elements.html --&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Please Help ASAP or suggest me how to do this.</p>

<p>Thanks</p>
