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/