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.


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 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:34:50 UTC