Angela Trigg wrote: > http://cmmi.trgsoftware.com/who/index.cfm?Fuseaction=Another_1&parentid=255 > > If you hover over the "i" icon it pops up content but it is going behind the > blue "more" bar, even though that bar has a zindex of 100 and the popup > content (div id="info") has a zindex of 200 and both layers have a position > declared. Any insights into what I'm doing wrong?
Angela, currently, you have some stacking contexts: r.p.1 #morelist z-index:100 a.p.1 #layermore z-index:10 r.p.2 #icons z-index:1 a.p.2 #info z-index:200 Hovering "i" in #icons pops #info up into view, but behind the blue #morelist bar. This is because #info resides in the stacking context established by its z-indexed parent #icons, but regarding its z-index, #icons < #morelist. In addition, your layout requires hovering "more" in #morelist pops up the images in #layermore, which renders over the #icons. All you need is to give #layermore a z-index: r.p.1 #morelist z-index:auto a.p.1 #layermore z-index:1 r.p.2 #icons z-index:auto a.p.2 #info z-index:auto #morelist and #icons are sorted in document order. Both of them don't get a stacking context for their own, so #info will render above #morelist, and #layermore, due to its z-index, will render over #icons. This works well in modern browsers. A simplified test case [1] shows that IE gets it wrong. IE establishes a new stacking context for each positioned element, rp1 and rp2, which is /wrong/ , and David Hyatt explains why [2] (a series of z-index related tests can be found in [3]). I don't have a solution for the IE problem. It's one or the other, rp1 < rp2 or rp1 > rp2 Being positioned means getting a stacking context in IE, therefore, all descendants of rpX will live within this context. As far as I do understand the stacking problem in IE, ap1 cannot render over rp2 at the same time ap2 renders over rp1. Ingo [1] http://www.satzansatz.de/cssd/escher.html [2] http://weblogs.mozillazine.org/hyatt/archives/2004_09.html#006469 [3] http://www.aplus.co.yu/css/z-pos/ -- http://www.satzansatz.de/css.html ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
