Tailwind 的 sr-only 类因使用 position: absolute 使屏幕阅读器专用元素脱离文档流，当其父容器未建立定位上下文时，Chrome 会将其锚定到 ，点击关联 触发焦点滚动时错误地滚动整个 body，导致布局断裂。根本解法是为滚动容器显式添加 relative 定位。
tailwind 的 `sr-only` 类因使用 `position: absolute` 使屏幕阅读器专用元素脱离文档流，当其父容器未建立定位上下文时，chrome 会将其锚定到 ``，点击关联 `
这是一个在现代前端开发中极易被忽视、却极具破坏性的 CSS 行为陷阱——它不报错、不警告，只在用户点击某个看似无害的 <label></label> 时，突然让整个页面“消失”或错位。问题根源并非 sr-only 本身有误，而是它与滚动容器的定位上下文缺失发生了隐式冲突。
? 问题本质：position: absolute 的锚点漂移
Tailwind 的 .sr-only 类定义如下（精简版）：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}关键在于 position: absolute —— 它会让元素脱离正常文档流，并向上查找最近的「已定位祖先」（即 position 值为 relative/absolute/fixed/sticky 的祖先）作为定位参考。若找不到，则默认锚定到 根元素。
在你的结构中：
<body style="overflow: hidden; height: 100vh;">
<header>...</header>
<main class="overflow-auto"> <!-- ⚠️ 此处无 position -->
<div class="narrow-container">
<label>
<input class="sr-only" type="radio"> <!-- 绝对定位 → 锚定到 <html>！ -->
<span>As Expected</span>
</label>
</div>
</main>
</body>由于 <main></main> 缺少 position: relative，所有 .sr-only 输入框实际被渲染在 坐标系中，且不随 <main></main> 内容滚动而移动。当用户滚动到底部并点击一个位于视口外的 <label></label> 时，浏览器（尤其是 Chrome）为将焦点元素（即那个静止在 上的 input）带入可视区域，会尝试滚动 —— 而你恰好设置了 body { overflow: hidden }，结果就是：滚动被抑制，但布局计算已崩坏，视觉上内容大面积“失联”。
✅ 验证方法：打开 Chrome DevTools → Elements 面板 → 右键任一
.sr-only<input>→ “Scroll into view”。你会看到页面剧烈跳动，甚至触发横向滚动条——这就是锚点错误的直接证据。
✅ 正确解法：为滚动容器添加 relative
只需在 <main></main>（或其他包裹 .sr-only 元素的最内层滚动容器）上增加 relative 定位，即可重建正确的定位上下文：
<!-- ✅ 修复后 -->
<main class="overflow-auto relative"> <!-- ← 关键：添加 relative -->
<div class="narrow-container">
<!-- 所有 sr-only input 现在以 main 为锚点，随内容同步滚动 -->
</div>
</main>对应 Tailwind 写法：
<main class="overflow-auto relative h-[calc(100vh-4rem)]"> <!-- ... --> </main>
这样，.sr-only 元素便严格跟随 <main></main> 的滚动位置，Chrome 在执行 focus scroll 时只会驱动 <main></main> 自身的滚动条，完全避开 body，布局稳定性立即恢复。
? 其他高风险场景与规避建议
| 场景 | 风险 | 推荐方案 |
|---|---|---|
Modal / Drawer 中使用 sr-only |
若 modal 根元素未设 relative，焦点滚动可能触发背景页滚动 |
Modal wrapper 加 relative，内部滚动区加 overflow-y-auto relative
|
表格内 sr-only 复选框 |
table 元素默认不是定位上下文，易漂移 |
在 <tbody> 或 <code><tr> 上加 <code>relative（需确保不影响表格布局） |
| Svelte/React 动态渲染后失效 | 组件重挂载可能导致定位上下文丢失 | 将 relative 提升至稳定父容器（如 <section class="relative"></section>），而非条件渲染节点 |
与 transform 共存 |
transform 会创建新层叠上下文，可能干扰定位锚点 |
避免对滚动容器同时使用 transform 和 relative；优先用 translateY() 替代 transform: translateY()
|
? 进阶提示：更健壮的无障碍替代方案
若项目对滚动稳定性要求极高（如金融、医疗类表单），可考虑以下增强策略：
-
禁用自动滚动（谨慎使用）
.sr-only:focus { scroll-margin: 0; scroll-behavior: auto; /* 防止 focus 时强制滚动 */ } -
用
visually-hidden替代sr-only（Tailwind v3.3+）visually-hidden使用clip-path实现隐藏，不依赖position: absolute，天然规避锚点问题：<input class="visually-hidden" type="radio" name="rating">
-
服务端预置定位上下文
在 HTML 模板中，为所有可能包含sr-only的区块统一添加relative：<div class="relative"> <label><input class="sr-only"> <span>Label</span></label> </div>
✅ 总结
-
sr-only本身无缺陷，问题出在定位上下文缺失； -
relative不是“装饰性”类，而是滚动安全的关键基础设施； - 修复只需一行代码：
； - 所有含
position: absolute的辅助性元素（如sr-only,peer-checked:...触发器）都应受此原则约束； - 在移动端 Safari / Chrome 中，该问题表现尤为突出，务必在真机测试中验证。
定位即安全，相对即稳定。别让一个像素宽的隐藏元素，撬动整座布局的根基。
