CSS Transform 导致 position:fixed 失效的排查与解决

CSS Transform 导致 position:fixed 失效的排查与解决

在 Nuxt 2 项目中，底部导航栏使用了position: fixed定位，但始终无法固定在页面底部。经过深入排查，发现罪魁祸首竟然是一个看似不相关的响应式缩放插件。

---

问题现象

项目是一个基于 Nuxt 2 的保险网站，底部有一个投保导航栏组件BottomBar，样式如下：

.dynamic-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; }

理论上这个组件应该固定在浏览器窗口底部，但实际表现却是：

• 导航栏位置异常，无法贴合底部
• 随着页面滚动位置会发生变化
• 在不同窗口尺寸下表现不一致

排查过程

初步排查：CSS 样式检查

首先检查了 CSS 样式，确认position: fixed、bottom: 0、z-index等属性都正确设置了。问题不在样式定义上。

深入排查：DOM 结构分析

打开浏览器开发者工具，查看组件的 DOM 结构：

<divid="scale-box"style="transform:scale(0.8);"><!-- 页面内容 --><divclass="dynamic-bottom-bar"style="