W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: Transforms and z-index (Was: [CSSWG] Minutes and Resolutions 2011-04-20)

From: Alan Gresley <alan@css-class.com>
Date: Fri, 22 Apr 2011 14:07:29 +1000
Message-ID: <4DB0FF01.8050506@css-class.com>
To: Boris Zbarsky <bzbarsky@MIT.EDU>
CC: www-style@w3.org, Simon Fraser <smfr@me.com>
CC Simon Fraser

On 22/04/2011 1:25 PM, Boris Zbarsky wrote:
> On 4/21/11 11:05 PM, Simon Fraser wrote:
>> On Apr 21, 2011, at 7:27 pm, fantasai wrote:
>>> smfr: Webkit has this just create a pseudo-stacking context (like
>>> 'opacity'
>>> does), but FF and maybe IE let z-index work.
> I'm not sure where the "maybe" comes from, given that there are previous
> posts on this very list saying that z-index works on transformed
> elements in Presto, Gecko, and IE9. As in, everything that implements
> transforms _except_ WebKit.

In the bug on Bugzilla [1], the only workaround for WebKit to stack 
anything higher is to use translateZ.

> I'm fine with the decision assuming the spec is actually clarified
> accordingly, since every single implementor who read it thought it meant
> that z-index should apply to transformed elements, but I really hope
> other decisions actually take mailing list discussion into account
> better...
> -Boris

This was going to be in a follow up reply to Simon's list message [2].

It is correct that transforms behave like opacity. I can confirm that 
all browsers currently layer a transformed element as if it had 
'position: relative' and 'z-index: 1'. This means that these transformed 
elements behave as if they have been positioned and have established a 
'new stacking context'.

A test.


A much cruder test.


I believe that both the introductions of the editor's drafts for 2D 
transforms [3] and 3D transforms [4] should have similar wording as is 
seen with CSS3 3.2 Transparency: the ‘opacity’ property [5] and with 
similar links to the CSS2.1 spec.

   | Since an element with opacity less than 1 is composited
   | from a single offscreen image, content outside of it
   | cannot be layered in z-order between pieces of content
   | inside of it. For the same reason, implementations must
   | create a new stacking context for any element with
   | opacity less than 1. If an element with opacity less
   | than 1 is not positioned, implementations must paint
   | the layer it creates, within its parent stacking context,
   | at the same stacking order that would be used if it were
   | a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
   | If an element with opacity less than 1 is positioned,
   | the ‘z-index’ property applies as described in [CSS21],
   | except that ‘auto’ is treated as ‘0’ since a new stacking
   | context is always created. See section 9.9 and Appendix E
   | of [CSS21] for more information on stacking contexts.

[1] https://bug647494.bugzilla.mozilla.org/attachment.cgi?id=523831
[2] http://lists.w3.org/Archives/Public/www-style/2011Apr/0305.html
[3] http://dev.w3.org/csswg/css3-2d-transforms/#introduction
[4] http://dev.w3.org/csswg/css3-3d-transforms/#introduction
[5] http://www.w3.org/TR/css3-color/#transparency

Alan Gresley
Received on Friday, 22 April 2011 04:07:58 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC