Can someone please explain how onclick works with nested, absolutely
positioned div containers? I would expect, when several divs are on
top of one another, clicking on them would trigger an onclick event
for each div. But it's not working that way. Take a look at the
attached file. Clicking in the center of the "orange" div, I would
think, would trigger an alert for all five of the divs. In fact, it
doesn't even trigger one for the "orange" div.
=============== ======
<html><head>
<script type="text/javascript">
function show(id){ alert( "clicked on " + id); }
</script>
<style type="text/css">
#gray {position:relat ive;height:300p x;width:300px;m argin-
right:auto;marg in-left:auto;borde r:thin solid #666;z-index:10}
#blue {position:absol ute;top:20px;le ft:20px;height: 100px;width:
100px;margin-right:auto;marg in-left:auto;borde r:thin solid blue;z-
index:20}
#red {position:absol ute;top:0;left: 0;height:100px; width:100px;mar gin-
right:auto;marg in-left:auto;borde r:thin solid red;z-index:30}
#green {position:absol ute;top:5px;lef t:5px;height:30 px;width:
30px;margin-right:auto;marg in-left:auto;borde r:thin solid green;z-
index:40}
#orange {position:absol ute;top:10px;le ft:10px;height: 30px;width:
30px;margin-right:auto;marg in-left:auto;borde r:thin solid orange;z-
index:50}
</style>
</head><body>
<div id="gray" onclick="show(' gray')">
<div id="blue" onclick="show(' blue')">
<div id="green" onclick="show(' green')"></div>
<div id="orange" onclick="show(' orange')"></div>
</div>
<div id="red" onclick="show(' red')"></div>
</div>
</body></html>
