本文揭示了一个CSS中的有趣现象：在Chrome和Firefox中，当父元素应用了transform属性时，子元素的position:fixed效果会被降级为position:absolute。这一特性在IE浏览器中并不适用。详细代码示例展示了fixed元素如何因为transform属性而跟随滚动条滚动，影响了其原本的固定定位行为。了解这一特性对于前端开发者优化网页布局和兼容性至关重要。
我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。
例如下面示意代码：
<p style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;" /></p>
结果，本来应该不跟着滚动条滚动的傲娇fixed元素，变成absolute一样的行为表现，比方说下面这个妹子，其position属性值1000%是fixed，但是，却大失所望跟着滚动条混了，归根结底就是父元素加了个小小的transform属性值。
注意，这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有，IE浏览器，包括IE11, fixed还是fixed的表现。
扫一扫
1393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
