固定定位应使用 position: fixed，其参照物是视口，元素不随滚动而移动；常见问题包括 iOS 键盘弹出偏移、transform 父容器导致失效、z-index 被新层叠上下文限制及横屏错位等。
固定定位用 position: fixed，不是 position: absolute
很多人误以为 absolute 能实现“页面滚动时保持不动”，结果发现元素随滚动条一起动了——那是绝对定位，不是固定定位。fixed 的参照物是视口（viewport），只要设了它，元素就钉在屏幕某个位置，不随文档流滚动。
常见错误现象：
– 元素在局部刷新或路由跳转后“消失”
– 在 iOS Safari 中点击输入框后定位偏移
– 使用 transform 父容器导致 fixed 失效（触发了新的包含块）
-
top/right/bottom/left必须至少指定两个值（比如top: 20px; right: 10px;），否则位置不可控 - 避免对
fixed元素使用margin: auto居中，它不会生效；改用transform: translate(-50%, -50%)配合left: 50%; top: 50% - 移动端需注意：iOS Safari 在软键盘弹出时会缩放视口，导致
fixed元素错位；可监听focus事件临时切为absolute+scrollTop补偿
z-index 不生效？检查父级是否创建了新层叠上下文
fixed 元素的层级由 z-index 控制，但前提是它没被包裹在有 transform、opacity 、will-change 或 filter 的祖先里——这些属性会创建新的层叠上下文，让子元素的 z-index 只在该上下文内比较。
典型场景：
– 导航栏用 fixed，但被一个带 transform: translateY(0) 的 wrapper 包着 → 层级压不住弹窗
– 某个 modal 组件内部用了 opacity: 0.99 → 里面所有 fixed 子元素层级被锁死
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的“Layers”面板（Chrome）或“Computed”标签页查看“Stacking Context”来源
- 修复方式：把
fixed元素提到 body 直接子级，或移除触发新层叠上下文的 CSS 属性 - 不要盲目堆高
z-index: 9999，先确认是否真在同一个层叠上下文中
响应式固定定位要防“视口变化”导致错位
PC 端设 right: 20px; bottom: 20px 很稳，但横屏 iPad 或折叠屏设备切换方向时，fixed 元素可能被裁切或挤出可视区——因为 fixed 坐标是基于当前视口尺寸计算的，而 orientation change 不触发重排，只触发 resize。
/* 推荐写法：用 calc() + 视口单位动态兜底 */
.fab-button {
position: fixed;
bottom: calc(1rem + env(safe-area-inset-bottom));
right: calc(1rem + env(safe-area-inset-right));
}- 始终加上
env(safe-area-inset-*)适配刘海屏/圆角（iOS 11.2+、Android 10+） - 慎用
vh/vw定位，Safari 在地址栏收起/展开时会改变vh值，造成跳动 - 如果必须监听视口变化，用
window.matchMedia('(orientation: landscape)')比resize更精准
性能隐患：避免在 fixed 元素上做高频重绘
fixed 元素脱离文档流，浏览器会为其单独建合成层（compositing layer）。但如果它频繁重绘（比如用 left/top 动画、或内部有大量 inline SVG），会引发主线程卡顿甚至掉帧。
- 动画优先用
transform: translateX()+will-change: transform，而非直接改left - 避免在
fixed容器里放未优化的轮播图、实时图表或 canvas 动画 - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看是否整屏闪红（说明重绘区域过大）
真正麻烦的不是怎么写 fixed，而是它一旦嵌套在复杂布局或第三方组件里，失效原因往往藏在看不见的层叠上下文或视口环境里。动手前先打开开发者工具看 computed styles 和 layers，比反复调 z-index 有用得多。
