Ingo Chao wrote: > Hi, > > Safari Webkit, Firefox 3b and Opera 9.5b render this test different: > > http://www.satzansatz.de/cssd/tmp/opacity/ > > #stackA { > opacity: 0.66; > z-index: 2; > background: red; > width: 300px; > height: 300px; > } > > #stackA p { > position: relative; > z-index: 1; > width: 200px; > height: 200px; > background: yellow; > left: -100px; > top: 50px; > } > > #stackB { > opacity: 0.90; > background: blue; > margin-top: -150px; > width: 150px; > height: 300px; > } > ... > > <body> > <div class="wrapper"> > <div id="stackA"> > <div><!----></div> > </div> > > <div id="stackB"></div> > </div> > </body> > > > 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 > > The red box and the blue box have opacity set. In addition, the first > one gets a z-index. > > In both Safari and Firefox, opacity forms a stacking context. In Safari, > the red box is painted over the blue box. z-index applies. Correct? > > (Opera seems wrong in letting the blue box crawl between the red box and > its child box, since a stacking context should be atomic. In addition, > the yellow child element inherits opacity, which appears to be wrong.) > > I know CSS3 Color Moldule: opacity does not tell about stacking issues, > and CSS3 Positioning Module is not written yet (or where is stacking > context defined in CSS3 ?). > > But since these three implementations of opacity exist: should z-index > apply here? > > Another question, probably related: > "(2) Elements with opacity < 1.0 establish a stacking context (and a > z-index of auto is changed to 0)" Dave Hyatt: > http://weblogs.mozillazine.org/hyatt/archives/2004_09.html > > For the latter part of it, where is that "a z-index of auto is changed > to 0" defined? > > Ingo > > -- > http://www.satzansatz.de/css.html
Both Safari (beta) and Opera on windows shows the same in which opacity creates a new stacking content. The blue box sits above the red box and the yellow box is above the blue box it's parent, I would say this is correct for both Opera and Safari to do this and goes along with what David Hyatt has. Giving position:relative to #stackA brings Firefox into line with Safari (creating a stacking content for FF). This also causes Opera to now shows the yellow box opaque over the parent's red box. Since now the yellow box is part of a stacking content?? CSS3 stacking content is here, though no mentioned of opacity. <http://www.w3.org/TR/css3-box/#stacking> Kind regards, 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/
