Prev: Windows XP Command Prompt - called via ActiveXObject
Next: FAQ Topic - Why does simple decimal arithmetic give strange results? (2008-04-22)
From: Mike on 21 Apr 2008 16:25
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;width:
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>
From: pr on 22 Apr 2008 06:12
Mike wrote:
> 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.

It doesn't, and if you give all the divs solid backgrounds, you will see
that the orange and green divs are completely obscured by the red div,
so it shouldn't.

>
> =====================
>
> <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;width:
> 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>

Here is your problem: gray contains blue and red. Blue contains in turn
green and orange. The z-index CSS property relates to the current
stacking context. Positioned elements having a z-index other than 'auto'
have their own stacking context, so the z-index you give green and
orange relates only to their order within blue. Since red is above blue
(in the stacking context of gray) it will hide them.

If no div contained any other div, you would get the results I guess you
anticipate.

Here's the official account: <URL:
http://www.w3.org/TR/CSS21/visuren.html#z-index>.

Hope that helps.
From: pr on 22 Apr 2008 13:00
pr wrote:
> Mike wrote:
>> 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.
[...]
> If no div contained any other div, you would get the results I guess you
> anticipate.
>

PS: re-reading your post, I see you anticipate something else. To have a
click event bubble through all the divs you would need to structure your
HTML so:

<div id="gray" onclick="show('gray')">
<div id="blue" onclick="show('blue')">
<div id="green" onclick="show('green')">
<div id="orange" onclick="show('orange')">
<div id="red" onclick="show('red')"></div>
</div>
</div>
</div>
</div>

CSS positioning has no effect on the manner in which events bubble, but
it may, as I have shown, prevent the initial element receiving the event.
From: Mike on 22 Apr 2008 14:49
Thanks!

The application I'm working on, actually has over 100 div containers,
so nesting them all inside one another seems impractical maybe even
problematic. After reading through your thoughts and playing around a
bit more, I think a better approach for my needs will be an image map
to trigger the events.

Thanks again, it was a great help!

Mike

> PS: re-reading your post, I see you anticipate something else. To have a
> click event bubble through all the divs you would need to structure your
> HTML so:
> CSS positioning has no effect on the manner in which events bubble, but
> it may, as I have shown, prevent the initial element receiving the event.

 | 
Pages: 1
Prev: Windows XP Command Prompt - called via ActiveXObject
Next: FAQ Topic - Why does simple decimal arithmetic give strange results? (2008-04-22)