fixed元素缩放重叠主因是像素锚点失步，应改用inset、rem、env()等弹性方案，并对Layui表格调用table.resize()修复。
缩放时 fixed 元素重叠，不是 z-index 没设够，而是定位基准和偏移值在缩放后“失步”了——top: 20px 还是那 20 逻辑像素，但视口渲染比例变了，视觉距离就塌缩了。
用 inset 替代 top/left + 像素值
固定定位元素一旦写 top: 16px; left: 16px，缩放后这 16px 就变成“僵硬锚点”，极易与其他元素（尤其是同样用像素偏移的 absolute 元素）挤在一起。改用 inset 可绕过该问题：
-
inset是相对于当前视口边缘的动态锚定，不依赖初始像素快照，Chrome 103+、Firefox 102+、Safari 16.4+ 均支持 - 写法更干净：
position: fixed; inset: 1rem auto auto 1rem;比top: 16px; right: auto; bottom: auto; left: 16px;更稳定 - 不要混用：
inset: 0;和left: 50%同时存在时，left会覆盖inset的 left 部分，行为不可控 - 旧浏览器 fallback：用
@supports not (inset: 0)包裹传统四值写法
避免 transform: translate() + 固定像素组合
transform: translate(10px, 10px) 在缩放下同样失效——10px 物理像素变多，但元素自身尺寸也放大，相对位移比例失衡，容易和相邻元素重叠。
- 若需微调位置，优先用
transform: translateX(-50%)配合inset: 0;，因为translateX(-50%)是相对于自身宽度，缩放时比例恒定 - 慎用
translateY(-2px)类绝对偏移；改用margin-top: -0.125rem或padding-top: clamp(0.25rem, 1vw, 0.5rem)，让偏移随字体或视口弹性变化 - 对 tooltip、弹窗等浮层，用
scale(0.98)模拟“内收”比用translate移动更安全
Layui 表格 fixed 列重叠必须调用 table.resize()
Layui 的 fixed 列不是纯 CSS 实现，而是靠 JS 拆分 DOM + 定位拼接。缩放不触发重绘，列宽不同步，立刻重叠或留白。
立即学习“前端免费学习笔记（深入）”；
-
table.resize()是唯一有效入口，参数必须是 render 时传入的id字符串（如'userTable'），不是元素 ID 或lay-filter - 监听
window.onresize不够：需同时监听visualViewport?.onresize（Chrome/Firefox）或降级为setInterval检测window.devicePixelRatio变化 - 多级表头时，上下两层
cols数组中对应列都必须显式声明相同fixed值，否则结构错位 - 页签（tab）内表格，要在 tab 激活事件中再调一次
table.resize()，否则缩放状态可能丢失
移动端 fixed 错位优先检查 viewport 和键盘干扰
iOS Safari 下 fixed 元素“跳动”或“被顶起”，90% 是 viewport 设置松动或软键盘触发视口重算导致的伪重叠。
- 确保
<meta name="viewport">严格锁定：width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no - 禁用
user-scalable=yes或maximum-scale宽松值，否则双指缩放会让 fixed 基准彻底脱钩 - 键盘弹出时，iOS 会临时压缩
visualViewport.height，但 fixed 元素仍按原始window.innerHeight定位；可监听focusin事件，临时切为position: absolute并手动计算top - 非关键 fixed 元素（如悬浮按钮），直接改用
position: sticky+ 容器高度控制，避开 viewport 动态变化
真正麻烦的不是缩放本身，而是你把多个“静态像素锚点”（top: 20px、translateY(-3px)、width: 200px）堆在一起——缩放一来，它们各自按不同规则缩放，结果就是互相咬合、重叠、错位。盯住 inset、rem、env() 和 table.resize() 这几个关键点，比调 z-index 有用得多。
