最近做项目遇到一个问题，就是为元素设置fixed属性之后发现元素竟然不是相对于窗口定位，纠结了很久，才发现原来是父元素设置了transform属性导致元素相对于父元素定位，fixed不相对窗口定位了。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform对fixed的影响</title>
<style>
*{
margin:0;
padding:0;
}
.box{
height:200px;
width:200px;
margin:0 auto;
background:red;
}
.wrap{
height:100px;
width:100px;
background:pink;
transform: rotate(0deg); /***加了transform属性之后fixed就改为相对父级元素position了**/
}
.fixed-box{
position:fixed;
left:20px;
height:50px;
width:50px;
background:green;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap">
<div class="fixed-box">fixed对象</div>
</div>
</div>
<script>
</script>
</body>
</html>父元素没有设置transform属性的时候是这样的：
设置transform属性的时候是这样的：
详情请参考张大神的博客：CSS3 transform对普通元素的N多渲染影响 « 张鑫旭-鑫空间-鑫生活
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
