chrome 下 position：fixed失效（react）
Posted shuhaonb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 属性
以上是关于chrome 下 position：fixed失效（react）的主要内容，如果未能解决你的问题，请参考以下文章
iframe里的position:fixed样式失效怎么解决