解决Fixed布局失效的问题

最新推荐文章于 2024-05-14 12:33:13 发布

原创最新推荐文章于 2024-05-14 12:33:13 发布 · 5.9k 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文探讨了CSS3 transform属性导致子元素fixed布局失效的问题，并提供了解决方案。在Vue项目中，使用vue-router时，固定底部按钮可能因transform而位置异常。解决方法是将fixed替换为absolute，并调整父元素为relative定位。

问题描述
当父元素存在css3的transform属性时，会导致子元素的fixed布局失效（其表现像化为absolute布局）。
场景示例
例如在vue-cli项目中，长遇见这种情况。当使用vue-router路由切换效果，导致页面固定在底部的按钮布局失效。路由切换完毕，按钮归位。
解决办法
经过一番折腾，总结最好的解决办法就是。用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>
```