Previous Message
Next Message

Why z-index does not work for transformed element?

Sent by Peng Yu on 8 January 2012 04:04


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>

    <div>Hello. This is a DIV element.</div>

    <div id="div2">Hello. This is a DIV element.</div>

  </body>
</html>


-- 
Regards,
Peng
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread: