为什么CSS fixed元素宽度与父容器无关

fixed元素的width: 100%参照最近已定位祖先，无则 fallback 至视口；left: 0; right: 0更可靠因其按偏移直接计算宽度，不受滚动条、缩放干扰，且行为可预期。

fixed元素的width: 100%到底参照谁

它不参照父容器，而是参照最近的已定位祖先；找不到时，直接 fallback 到视口（viewport）。哪怕父元素写了 width: 300px，只要没加 position: relative，width: 100% 就算到视口宽度上——比如在 1440px 宽屏幕下，它会撑成 1440px，而不是你期望的 300px。

常见问题表现：

1. 父容器明明设了 max-width: 1200px，但 fixed 子元素横跨整个屏幕
2. 用开发者工具看 computed width，显示 100vw 或一个远大于父容器的像素值
3. 页面缩放后 fixed 元素宽度“卡死”，不再随父容器响应式变化

left: 0; right: 0; 为什么比 width: 100% 更可靠

left: 0; right: 0; 是定位拉伸，不是尺寸继承。它强制元素水平方向填满其包含块的可用空间，且不受百分比计算干扰。

关键点：

1. width: 100% 是相对计算，受视口滚动条宽度影响（100vw 包含约 17px 滚动条），容易右侧溢出
2. left: 0; right: 0; 是绝对偏移，浏览器直接按 right - left 推导宽度，缩放、滚动、横屏时都稳定
3. 若父容器设了 position: relative，left/right 仍以它为包含块；没设，则退回到视口——行为可预期，不“意外”

想让fixed元素宽度真和父容器一致，怎么办

纯 CSS 几乎做不到“自动同步”，因为 fixed 天然脱离文档流。可行路径只有三条：

1. 用 JavaScript 动态读取父元素 offsetWidth 并赋给 fixed 元素：fixedEl.style.width = parentEl.offsetWidth + 'px';，再监听 resize 和 scroll（后者防布局变动）
2. 改用 position: sticky：它既保持与父容器宽度一致，又能实现滚动吸附效果，前提是父容器有明确高度且未设 overflow: hidden
3. 放弃 fixed，改用 position: absolute + transform: translateY() 模拟固定效果，同时保留文档流关系

fixed元素被父容器 overflow: hidden 裁剪的真正原因

它本该穿透，但一旦祖先元素用了 transform、filter、backdrop-filter、will-change: transform 或 contain: paint，就会创建新的包含块——此时 fixed 元素的定位参考系就从视口变成了这个新包含块，于是被裁剪。

排查时重点看：

1. fixed 元素的所有祖先，是否某一层加了 transform: translateZ(0) 或类似 hack
2. 是否有全局 CSS 重置里悄悄加了 backdrop-filter: blur(1px)
3. 父容器是否用了 contain: layout —— 这个属性会让 fixed 行为彻底降级为 relative

这类问题不会报错，渲染结果却突然失效，最容易被忽略。