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 属性