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: Mon, 11 Apr 2011 21:07:37 +1000
Message-ID: <4DA2E0F9.70202@css-class.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
CC: Andrew Fedoniouk <andrew.fedoniouk@live.com>, Boris Zbarsky <bzbarsky@MIT.EDU>, Simon Fraser <smfr@me.com>, www-style list <www-style@w3.org>
On 11/04/2011 4:53 PM, Andrew Fedoniouk wrote:
> Boris,
>
> I do not understand relationship of z-index and transformed elements.
> Why this is needed or required?


Well source order alone should not dictate stacking order (z-index does 
this). Currently with this fragment of HTML, the last in the source in 
WebKit will always win.


   <div class="outer">
     <div class="middle">middle layer</div>
     <div class="inner relative"></div>
   </div>

   <div class="last test2">last in source</div>


To make it work in WebKit, you must change the source order to this.


   <div class="last test2">last in source</div>

   <div class="outer">
     <div class="middle">middle layer</div>
     <div class="inner relative"></div>
   </div>


> Nor technically nor logically transform and z-index are related as far
> as I understand (and yet I have them both implemented).
> Could you explain origin of the problem?
>
> Thanks in advance,


See above about WebKit. Here's the test.

http://css-class.com/test/css/3/transitions/rotate-on-hover-and-origin.htm


I also note something else and that is having to use position relative 
to correctly stack the float (yellow box, midde layer) between the outer 
box and the inner box before any transformation via transition. The text 
in the float is then painted higher than the inner box when the 
transition is over. The only way to counter this is to add z-index to 
the inner box.

This is not good since some animations should be layered by translateZ. 
You don't want a stacking context destroying this.


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

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

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