解決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>