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

设置了(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>

参考:http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

原文地址:https://www.cnblogs.com/MyNameIsJim/p/3592746.html