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布局失效

  1. transform 属性值不为 none 的元素
  2. perspective 值不为 none 的元素
  3. 在 will-change 中指定了任意 CSS 属性
posted @ 2019-12-18 11:33  去有风的地方  阅读(702)  评论(0编辑  收藏  举报