解决Fixed布局失效的问题

解决transform导致的Fixed布局失效的问题

1. 问题描述
   当父元素存在css3的transform属性时，会导致子元素的fixed布局失效（其表现像化为absolute布局）。

2. 场景示例
   例如在vue-cli项目中，长遇见这种情况。当使用vue-router路由切换效果，导致页面固定在底部的按钮布局失效。路由切换完毕，按钮归位。

3. 解决办法
   经过一番折腾，总结最好的解决办法就是。用absolute 替代fixed。（转换方式多异，此处仅展示博主所用）

   原代码：按钮fixed在底部，其他元素依次排列

   <div>
   	<section></section>
   	<section></section>
   	...
   	<button></button>
   </div>
   

   改版代码：父元素relative布局，按钮absolute在底部，其他元素包裹在一个容器内。容器高度100vh，可滑动。

   <div style="position: relative">
   	<div style="height: 100vh; overflow: scroll">
   		<section></section>
   		<section></section>
   		...
   	</div>
   	<button></button>
   </div>