- Joined
- Jul 31, 2004
I have a page with several levels of nested divs:
div
--div
---div with span tooltip
---div with span tooltip
---div with span tooltip
----div
-----div with span tooltip
-----div with span tooltip
----div
-----div with span tooltip
That structure is used once for each registered account. Currently it shows about 40 divs, and they're grouped into yet another div per usergroup. I've tried setting z-index for every div, but any span tooltip from one usergroup div, if it goes outside the bounds, displays UNDER the other usergroup divs, while I want it to display on top.
Each usergroup div has "position:relative; max-width:50%; min-width:33%;"
CSS for the span tooltips:
Everything _inside_ of each usergroup div is diplaying in the proper order, tooltips are on top of everything else just like they're supposed to be. I've tried adding a z-index to the usergroup div by putting -$i in the PHP output loop so each subsequent usergroup div would be behind the one previously shown, but it didn't change anything. If there's no way to do this with straight CSS, is it possible to place each group in table cells with a vertical scrollbar, but horizontal overflow displayed without a scrollbar(on top of the next cell if necessary)? They can't be positioned absolutely because they've all got a different number of users in each group, and I want them shown together rather than having a huge blank space between if one group has 20 people and the one next to it only has 2.
div
--div
---div with span tooltip
---div with span tooltip
---div with span tooltip
----div
-----div with span tooltip
-----div with span tooltip
----div
-----div with span tooltip
That structure is used once for each registered account. Currently it shows about 40 divs, and they're grouped into yet another div per usergroup. I've tried setting z-index for every div, but any span tooltip from one usergroup div, if it goes outside the bounds, displays UNDER the other usergroup divs, while I want it to display on top.
Each usergroup div has "position:relative; max-width:50%; min-width:33%;"
CSS for the span tooltips:
Code:
div.info {
position:relative;
z-index:24;
display:block;
color:#C0C000;
text-decoration:none;
}
div.info:hover {
z-index:25;
}
div.info span {
display: none;
z-index:23;
}
div.info:hover span {
z-index:25;
display:block;
position:absolute;
top:2em; left:2em;
max-width:80%;
border:1px solid orange;
background-color:#111111; color:#C0C000;
text-align: left;
}Everything _inside_ of each usergroup div is diplaying in the proper order, tooltips are on top of everything else just like they're supposed to be. I've tried adding a z-index to the usergroup div by putting -$i in the PHP output loop so each subsequent usergroup div would be behind the one previously shown, but it didn't change anything. If there's no way to do this with straight CSS, is it possible to place each group in table cells with a vertical scrollbar, but horizontal overflow displayed without a scrollbar(on top of the next cell if necessary)? They can't be positioned absolutely because they've all got a different number of users in each group, and I want them shown together rather than having a huge blank space between if one group has 20 people and the one next to it only has 2.
