css3 transform会使元素成为position元素的包含块

dgx2006

于 2014-03-10 21:44:00 发布

阅读量131

点赞数

原文链接：http://www.cnblogs.com/MyNameIsJim/p/3592746.html

版权

设置了（transform属性的）元素将会成为其（设置了position：absolute | fixed; 属性的）后代元素的包含块。即，它会成为定位基准。

效果：

代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    * { margin: 0; padding: 0;}
    body { position: relative;}
    .transform { 
        margin: 100px; 
        -webkit-transform: scale(1); 
        -moz-transform: scale(1); 
        transform: scale(1);
    }
    .position { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100px; 
        height: 100px; 
        background: #666; 
    }

    </style>
</head>
<body>

<div class="transform">
    <div class="position"></div>
</div>

</body>