通过为绝对定位元素的父容器设置 overflow-x: hidden 并合理使用负 margin 补偿，可在不隐藏 body 滚动、不破坏布局流的前提下，安全实现装饰性元素（如圆角、图标）向右/左溢出屏幕的效果。
通过为绝对定位元素的父容器设置 `overflow-x: hidden` 并合理使用负 `margin` 补偿，可在不隐藏 body 滚动、不破坏布局流的前提下，安全实现装饰性元素（如圆角、图标）向右/左溢出屏幕的效果。
在 Web 布局中，常需用绝对定位（position: absolute）将装饰性元素（如 SVG 圆形、渐变块、边角图标）精准放置于视口边缘之外——例如右侧悬停的圆形徽章。但若该元素直接置于
下，且设置了 right: -96px 等负偏移值，浏览器会将其视为「内容宽度的一部分」，从而触发 body 的 overflow-x: auto（表现为不必要的水平滚动条），即使视觉上它完全在可视区外。关键在于：不能对 或根容器设 overflow-x: hidden（会全局禁用横向滚动，影响可访问性与响应式行为），而应采用「隔离式裁剪」策略。
✅ 正确做法是引入一个轻量级包装容器（.container），并应用以下组合：
.container {
position: relative; /* 为内部绝对定位提供参考上下文 */
width: 100%;
overflow-x: hidden; /* 仅裁剪该容器内的横向溢出，不影响页面其他部分 */
}
.circle {
width: 185px;
height: 185px;
position: absolute;
top: 1430px;
right: -96px;
margin-right: -96px; /* 关键补偿：抵消因 right:-96px 导致的渲染占位，防止容器计算宽度时多出 96px */
}
HTML 结构如下：
<div class="container">
<div class="circle">
@@##@@
</div>
</div>
? 为什么需要 margin-right: -96px？
当 right: -96px 将元素向右推出容器边界时，某些浏览器（尤其 Chrome）仍会将该偏移计入容器的「内容尺寸计算」，导致 .container 实际宽度被撑大，进而间接影响其父级（如 body）的布局判定。添加等量负 margin-right 可精确抵消这一副作用，确保容器宽度严格保持为 100%，真正实现「视觉溢出但布局静默」。
⚠️ 注意事项：
- 避免在 或 html 上直接设置 overflow-x: hidden —— 这会破坏键盘导航（如 Tab 键焦点移出视口）、影响屏幕阅读器行为，并可能干扰移动端手势；
- 若 .circle 需响应式缩放，请同步调整 margin-right（可用 CSS clamp() 或媒体查询）；
- 对于左侧溢出（left: -Xpx），对应使用 margin-left: -Xpx；
- 如需支持旧版 Safari，建议为 .container 显式声明 max-width: 100vw，进一步约束宽度上限。
此方案兼顾语义清晰、无障碍友好与跨浏览器稳定性，是现代装饰性溢出布局的推荐实践。
