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

On Apr 22, 2011, at 12:05 PM, Simon Fraser wrote:

>> RESOLVED: transforms create a pseudo-stacking context, not a full one.
>>           z-index doesn't apply.
> 
> I realized that was forgetting part of the story here.
> 
> A transformed element acts as a stacking context  (like one with opacity). But
> it also acts as a positioning container for its descendants, so, for example, a
> position:relative child's left and top are relative to its transformed ancestor in
> that case, again as if the transformed element itself has position:relative.
> 
> I don't think this changes the fact that z-index should not apply to a transformed
> element (just as 'left' and 'top' do not apply), but I wanted to mention it in case
> someone disagrees.

I was going to note that  (with an absolute pos. child of a transform). But you confuse me. In all UA I've tested (Gecko 1.9.2+, Webkit nightly, Opera 11.10), 'left' and 'top' are applied to the AP child of a transform.

http://dev.l-c-n.com/CSS3/transform-stacking-context-AP.html

<!doctype html>

<style type="text/css">
div { width: 200px; height: 200px; margin: 100px; }
.d {
	background: yellow;
	-moz-transform: rotate(-10deg) translatex(30px) translatey(-30px);
	-ms-transform: rotate(-10deg) translatex(30px) translatey(-30px);
	-o-transform: rotate(-10deg) translatex(30px) translatey(-30px);
	-webkit-transform: rotate(-10deg) translatex(30px) translatey(-30px);
	}
div > span {position: absolute; left: 50px; top: 10px; width: 40px; height: 40px; background: green; color: white;}

</style>

<div class="d"><span>ap</span></div>

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/

Received on Friday, 22 April 2011 03:28:47 UTC