偶然的机会发现fiexd定位会受到transform的影响,以下为自己弄的小案例
当外部元素没有transform属性时
-----css部分-----
<style>
*{
padding: 0;
margin: 0;
}
.transform{
width: 100px;
height: 100px;
background: rgb(196, 196, 196);
/* transform:translateY(20%) */
}
.fixed{
position: fixed;
left: 0;
top: 0;
width: 50px;
height: 50px;
background: #000;
}
</style>
-----html部分-----
<div class="transform">
<div class="fixed">fixed</div>
</div>
正常固定在浏览器窗口左上角
当外部盒子设置transform
*{
padding: 0;
margin: 0;
}
.transform{
margin: auto;
width: 200px;
height: 200px;
background: rgb(196, 196, 196);
transform:translateY(20%)
}
.fixed{
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: #000;
}
神奇的事情发生了,fixed盒子被限制在了外部盒子体内,连同外部盒子一起向下偏移,只因为外部盒子设置了transform
借用以下链接一句话:
position:fixed
可以让元素不跟随浏览器的滚动条滚动,而且这种跟随效果连它的兄弟们position:relative/absolute
都限制不了。但是,真是一物降一物,position:fixed
固定效果却被小小的transform给干掉了,直接降级变成position:absolute
的蛋疼表现。
详细解释:https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/