不会撑宽body；当left、right同时设置且width未设时，浏览器按width=包含块宽−left−right计算，若结果超限则触发横向滚动。
position: fixed/absolute 元素的 right 值会撑宽 body 吗？
会，但不是直接“撑宽”，而是当 right 与 left 同时被设为非 auto 值（比如 left: 0; right: -20px;），且容器宽度不足以容纳这两个偏移约束时，浏览器会按“left + width + right = 包含块宽度”反向推算元素宽度——这可能导致计算出一个极大或负值的 width，最终让该元素视觉上不溢出，但渲染层仍申请了超出视口的布局空间，触发 body 横向滚动。
right 和 width 冲突时浏览器怎么算？
对于 position: absolute 或 fixed 元素，若同时指定 left、right 和 width，CSS 规范规定：width 会被忽略，浏览器以 left 和 right 为准推算实际宽度。这意味着：
- 如果
left: 10px; right: 10px;，且父容器宽 300px，则元素宽 = 300 − 10 − 10 = 280px - 如果
left: 0; right: -50px;，父容器宽 300px，则元素宽 = 300 − 0 − (−50) = 350px → 实际比父容器还宽 50px - 若父容器是
html或body，这个“多出来的 50px”就会让body.scrollWidth > window.innerWidth，横向滚动条出现
为什么 Safari 特别容易因 right 出问题？
Safari（尤其是 macOS Ventura / iOS 16+）在处理 right 配合 transform 或 will-change 的定位元素时，对包含块宽度的估算存在偏差：它可能把滚动条宽度（12–17px）错误计入，或在 DPR=2 设备上对小数像素四舍五入异常。典型表现是：
- 仅在 Safari 下出现横向滚动，Chrome/Firefox 正常
- 滚动条只在页面缩放为 90% 或 110% 时闪现
- DevTools 中看到
body的 computed width 是100vw + 15.2px这类非整数值
临时验证方法：在控制台运行 $$('body')[0].scrollWidth - window.innerWidth，若结果 > 1，基本可锁定是定位元素干扰。
修复 right 导致的横向滚动，三步实操
不靠 overflow-x: hidden 掩盖，而是从定位逻辑入手：
- 检查所有
position: fixed或absolute元素，用 DevTools 筛选器搜[style*="right"]，重点看是否同时写了left和right - 把
right: -Xpx改成transform: translateX(Xpx)（例如right: -20px→transform: translateX(20px)），后者不参与盒模型计算，不会影响宽度推算 - 若必须用
right，确保其值为非负数，且不与left冲突；更稳妥的是只设left或right单边 +width，避免双向约束
复杂点在于：有些 UI 库（如某些弹窗组件）内部动态写 right 偏移，你改了 CSS 也可能被 JS 覆盖。这种场景下，得在 JS 初始化后用 getComputedStyle(el).right 检查真实值，再针对性修正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
