onClick / Nested Divs

Mike · Apr 21, 2008

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>

pr · Apr 22, 2008

Mike said:
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.

pr · Apr 22, 2008

pr said:
Mike said:

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.

Click to expand...

[...]
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.

Mike · Apr 22, 2008

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

I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Please Help?	0	Jul 23, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Show text on-click with transition	2	Feb 14, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Trouble with css	4	Mar 20, 2020

onClick / Nested Divs

Mike

pr

pr

Mike

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads