[css-d] Why z-index does not work for transformed element?
Hi,
In the following example, no matter what z-index I set, div2 is always
above the first div. Does anybody know how to change css to make div2
in the bottom? Why z-index does not work with transform?
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
z-index:0
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
z-index:1000;
}
/style
/head
body
divHello. This is a DIV element./div
div id=div2Hello. This is a DIV element./div
/body
/html
--
Regards,
Peng
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why z-index does not work for transformed element?
In the following example, no matter what z-index I set, div2 is always above the first div. Does anybody know how to change css to make div2 in the bottom? Why z-index does not work with transform? You just need to make sure that the DIV elements have a position value. Set it to position:absolute; or position:relative; and the Z-index will have effect. mS __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why z-index does not work for transformed element?
On Jan 8, 2012, at 1:47 PM, Peng Yu wrote: In the following example, no matter what z-index I set, div2 is always above the first div. Does anybody know how to change css to make div2 in the bottom? Why z-index does not work with transform? In general, z-index only applies to positioned elements as already noted. http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index However, transformed() elements establish their own stacking context, and z-index _should_ apply even if the element is not positioned. http://www.w3.org/TR/css3-2d-transforms/#introduction Any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. The text does not yet mention z-index… it was agreed within the CSS WG, however. http://lists.w3.org/Archives/Public/www-style/2011Apr/thread.html#msg116 BTW - a positive z-index will move your element higher in the stacking order, if you want it below (under), try a negative z-index. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why z-index does not work for transformed element?
On Jan 8, 2012, at 3:04 PM, Peng Yu wrote: So my code (without position:absolute) should work theoretically speaking. It is just that the feature hasn't been implemented in the browser. Is it the case? It (your example) theoretically should work if you use a negative z-index or if your first div is positioned and has a z-index higher than your transformed() div. Webkit hasn't implemented it yet. I think Gecko nightly builds do support that (and maybe Firefox.latest, I don't have any of those on this machine). No idea about others. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
