父节点使用css的transform: translate时，子元素position:fixed在chrome浏览器中无效

背景：

移动端的项目，无意间发现了一个Chrome浏览器下的一个现象，在使用CSS3的transform: translate属性对节点A进行位置变化，
例：

此时父节点下面有一个子元素上使用了position:fixed进行了定位，按照常理子元素应该悬挂在浏览器窗口视图上，不会跟随滚动条而滚动的，但是这个效果在Chrome浏览器下面是无效的，经过测试在IE11、Firefox、safari中均没有问题，在Opera中出现的效果和Chrome中完全一样。

结论：

在Chrome和Opera浏览器下，使用CSS3的transform: translate转化位置节点，其所有使用position:fixed定位的子孙节点的定位功能均无效

解决办法：

你可以在父节点添加两个div，把需要transform: translate的那部分都放到第一个div里面，然后把需要fixed定位的元素放到第二个div上；

因为fixed定位那个节点是相对于视窗的，与文档流中的位置没有关系，所以你可以直接把fixed定位的元素放在最后一个元素（防止被别的元素覆盖，或者设置一个高的z-index）;

总而言之，既然transform: translate元素内不能包含fixed定位的元素，你就把fixed定位的元素移动到translate元素的外边就行。