chrome 下 position:fixed失效(react)
子元素使用position:fixed时,没有相对于浏览器视窗进行定位,排查后发现他的祖先元素设置了transform属性
当transform属性值不为none时,设置了position:fixed的元素会相对于设置了transform属性的元素进行定位(而不是视窗)
解决办法:1、react中,使用ReactDOM.createPortal将子元素portal到元素外边
2、可以在body里面添加两个div,第一个div设置为内容容器,把需要translate的那部分都放到第一个div里面,然后把需要fixed定位的元素放到第二个div中;因为fixed定位是相对于视窗的和在文档中的位置没有关系,所以你可以直接把fixed定位的元素作为body元素的最后一个元素(防止被别的元素覆盖,或者设置一个高的z-index)
即:translate内不能包含fixed定位的元素,你就把fixed定位的元素移动到translate元素的外边
其他导致position:fixed布局失效
transform
属性值不为 none 的元素perspective
值不为 none 的元素- 在
will-change
中指定了任意 CSS 属性