设计

transform的副作用导致fixed行为失效

2019-08-03聚力创意

在开发音乐项目(https://y.julipay.com)时使用position:fixed定位元素,发现元素无法相对于屏幕视口进行定位,变成了和 absolute 一样,查询了一下发现是父元素设置了transform属性导致position:fixed失效。

这个问题属于position: fixed的特性,MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#%E8%AF%AD%E6%B3%95)有描述:fixed:当元素祖先的transform属性非none时,容器由视口改为该祖先。

在 IE 下不存在这个问题,还是fixed的表现行为

另外filter也会导致position:fixed失效

蜀ICP备17044229号