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

Re: Should z-index apply to transformed elements?

From: Alan Gresley <alan@css-class.com>
Date: Tue, 12 Apr 2011 04:36:36 +1000
Message-ID: <4DA34A34.4070202@css-class.com>
To: fantasai <fantasai.lists@inkedblade.net>
CC: Simon Fraser <smfr@me.com>, Boris Zbarsky <bzbarsky@mit.edu>, Andrew Fedoniouk <news@terrainformatica.com>, Andrew Fedoniouk <andrew.fedoniouk@live.com>, www-style list <www-style@w3.org>
On 12/04/2011 3:36 AM, fantasai wrote:
> On 04/11/2011 08:54 AM, Simon Fraser wrote:
>>
>> My proposal is to not have z-index applied to transformed elements.


Please bare in mind that there are two things. The first is a 'stacking 
context' (some referred to as a stacking or painting layer) [1] and the 
second is a 'z-index or new stacking context' with a value that is not 
'auto' [2]. Here are some details.


   | <integer>
   |   This integer is the stack level of the generated box in the
   |   current stacking context. The box also establishes a new
   |   stacking context.


   | auto
   |   The stack level of the generated box in the current stacking
   |   context is '0'. The box does not establish a new stacking
   |   context unless it is the root element.


>> I'll work
>> with Ted to propose some new wording for the spec.
>
> If you apply "position: relative" to the element, will z-index then apply?
>
> ~fantasai


Opera, IE9 and Firefox are already painting the transforms as if they 
already had 'position relative' in respect to painting layer. If 
transforms cause a default behavior of 'position relative' then this 
would establish a new containing  block. Do we want this?

This is similar to the issue we faced a few years ago with box-shadow 
and text-shadow. Source order alone (normal painting behavior) was 
adopted as the spec for box-shadow and text-shadow. I think that we 
should step wisely with this.

Here is a test case that shows how transforms are painted above a float 
when transitioning. Before and after the transition has taken place, the 
float is painted higher.


http://css-class.com/test/temp/transform-transition-painting.htm


The second example has 'position relative' on the float. This is strange 
for me since as a CSS author, I usually use to using 'position relative' 
to promote the painting layer (paint over), not de-promote a layer 
(paint under).



[1] http://www.w3.org/TR/CSS21/visuren.html#x40
[2] http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Monday, 11 April 2011 18:37:10 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT