Question

I have the following HTML code:

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="A" style="width:100px; height: 100px; background: #00FF00; padding: 15px; 
     z-index: 50; opacity: .5" onclick="javascript:alert('A')">
    <div id="B" style="width:50px; height: 50px; background: #FF0000; z-index:10;"  
      onclick="javascript:alert('B')" >
    </div>
</div>

I was hoping this would make it so that clicking on div B’s position would not invoke it’s onclick, but only A’s since A ha a higher z-index.

If not with z-index, how can I achieve this ?

Answer 1

Your z-index’s won’t work as you need to change the css position to relative, fixed, or absolute. reference.sitepoint.com/css/z-index.

 <div id="A" style="width:100px; height: 100px; background: green; padding: 15px; 
         z-index: 50; opacity: .5; position:relative;" onclick="alert('A'); return false;">
        <div id="B" style="width:100%; height:100%; background: red; z-index:100;position:relative;"  
          onclick="window.event.stopPropogation();alert('B'); return false;" >
        </div>
    </div>

http://jsfiddle.net/SmdK8/