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:relative;height:300px;width:300px;margin-
right:auto;margin-left:auto;border:thin solid #666;z-index:10}
#blue {position:absolute;top:20px;left:20px;height:100px ;width:
100px;margin-right:auto;margin-left:auto;border:thin solid blue;z-
index:20}
#red {position:absolute;top:0;left:0;height:100px;width :100px;margin-
right:auto;margin-left:auto;border:thin solid red;z-index:30}
#green {position:absolute;top:5px;left:5px;height:30px;wi dth:
30px;margin-right:auto;margin-left:auto;border:thin solid green;z-
index:40}
#orange {position:absolute;top:10px;left:10px;height:30px; width:
30px;margin-right:auto;margin-left:auto;border: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>
Similar Threads
