- From: Alan Gresley <alan@css-class.com>
- Date: Mon, 11 Apr 2011 21:07:37 +1000
- 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 UTC