> -------- Original Message -------- > Subject: Re: [css-d] Should z-index apply to elements with opacity > From: Ingo Chao <[EMAIL PROTECTED]> > Date: Mon, November 26, 2007 10:51 am > To: Alan Gresley <[EMAIL PROTECTED]> > Cc: css-d@lists.css-discuss.org > > Alan Gresley wrote: > > > Ingo Chao wrote: > > > >> Hi, > >> > >> Safari Webkit, Firefox 3b and Opera 9.5b render this test > >> different: > >> > >> http://www.satzansatz.de/cssd/tmp/opacity/ ... Screenshots: > >> http://www.satzansatz.de/cssd/tmp/opacity/webkit.png > >> http://www.satzansatz.de/cssd/tmp/opacity/fx.png > >> http://www.satzansatz.de/cssd/tmp/opacity/opera.png > >> > > > ... Both Safari (beta) and Opera on windows shows the same in which > > opacity creates a new stacking content. ... > > Thank you very much for the testing, Alan. > > I just installed Safari 3.0.4 on my PC and got the same result as on > Mac: The blue box offsets under the red one (the z-index seems to apply > to the red box even if this element is not positioned). Thats different > to Firefox and Opera. > > And Opera 9.5 PC does not form a stacking context for the red box, > because if if would, the blue box was not allowed to sit between the > yellow child of the red box "A stacking context is atomic from the point > of view of its parent stacking context; boxes in other stacking contexts > may not come between any of its boxes." > http://www.w3.org/TR/CSS21/visuren.html#layers > > Another problem in Opera can be seen in the orange area, where the > yellow and red boxes overlap: I may be wrong, but I thought this is not > how opacity should work on container elements and their children. > http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency > > > > CSS3 stacking content is here, though no mentioned of opacity. > > > > <http://www.w3.org/TR/css3-box/#stacking> > > Hmm. Then I believe the stacking of opacity is to be defined in the > missing CSS3 Positioning Module. > > Thanks again, > > Ingo > > -- > http://www.satzansatz.de/css.html
Hi This was all to intense last night when I first replied, I have been building over the last few days some test with selectors with browser differences. Muddling my brains. Taking another look at your test Ingo and doing some further test offline I have now broken it down bit by bit (all test done on windows). <http://css-class.com/007/opacity1.htm> #stackA {z-index:1}/* not positioned so not applied */ #stackA p {position:relative} Safari, Firefox, Opera and IE7 shows the same. So position relative layers the yellow box above the blue box (Correct). I have removed the z-index for all test from the #stackA p to remove any confusion. <http://css-class.com/007/opacity2.htm> #stackB {opacity:0.80} Firefox, Opera and IE7 shows the same as the last test. Opacity has created a stacking content for the blue box in Safari so now the blue box is above the yellow and red box. <http://css-class.com/007/opacity3.htm> #stackA {opacity:0.66} Opacity has created a stacking content for the red box in Safari so z-index applies and now the yellow and red box is above the blue box. The layering doesn't change in Opera, but now the red and yellow box are slightly transparent. IE7 still the same. This would indicate that no z-index or stacking content is applied in Opera and IE7? Firefox is a mystery. It now layers the same as safari in the last test where blue box is above the yellow and red box. Since nothing seemed to have happened when #stackB was given opacity why should it change now when #stackA is given opacity?. Maybe Firefox understands that two different boxes with opacity belong to different stacking context's though no z-index is applied. <http://css-class.com/007/opacity4.htm> #stackA {position:relative} Now the z-index for #stackA is applied in Firefox and Opera and IE7. All render the same now with the yellow box above the parent red box which is above the blue box. This would indicate that opacity creates a new stacking content in Safari and Firefox, but Safari is the only browser to apply the z-index? Maybe a test of the yellow box and red box alone with opacity. What is needed to make the yellow box appear opaque above the it's parent red box. Kind reagrds, Alan <http://css-class.com/> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
