legend不能定位到fieldset右下角，因其是语义标题节点，必须锚定在上边框内侧左上角；强行绝对定位会破坏键盘导航、屏幕阅读器识别及边框渲染，正确做法是改用role="group"配合aria-labelledby实现可访问的右下角标题。
不能让 legend 浮动在 fieldset 的右下角——这不是样式问题，是语义和可访问性红线。
为什么 legend 不能被定位到右下角
legend 是 fieldset 的语义标题节点，浏览器强制将其锚定在上边框内侧左上角区域。所谓“右下角”完全违背 HTML 规范对它的定位逻辑：
- 键盘 Tab 顺序会断裂：焦点不会自然落到
legend上，也无法通过它聚焦整组控件 - 屏幕阅读器（NVDA / VoiceOver）将无法将其绑定为该组的可访问名称，大概率静音或跳读
- 旧版 Safari 和部分 Android WebView 会直接裁切文字、渲染错位甚至完全不显示
-
fieldset的边框不会自动跟随legend重绘，导致视觉断层、边框悬空
常见错误尝试与真实后果
有人用 position: absolute + bottom: 0; right: 0; 强行拖拽 legend，结果是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
fieldset边框仍从顶部开始绘制，legend悬在右下角空白处，视觉割裂 - Chrome DevTools 中能看到
legend已脱离文档流，但 DOM 树里它还在原位——这种“假自由”实际破坏了可访问性链路 - 表单提交时，
fieldset[disabled]依然禁用直属子控件，但legend自身颜色、状态完全失控，需额外 CSS 修补
真正可行的替代方案
如果业务场景确实需要右下角标题（比如设计稿要求），必须放弃 legend，改用语义等价但可控的结构：
立即学习“前端免费学习笔记（深入）”；
- 用
<div role="group" aria-labelledby="group-title">替代fieldset - 用
<h2 id="group-title">xxx</h2>或<span id="group-title">xxx</span>作为标题，再用 CSS 定位到右下角 - 确保所有内部控件都显式声明
aria-describedby或通过 DOM 层级维持逻辑归属 - 禁用整组需靠 JS 手动遍历并设
disabled，无法复用原生fieldset[disabled]
这个方案没有“完美复刻”，但它是唯一能在视觉自由度和可访问性之间取得平衡的做法。真正的难点不在 CSS 定位，而在于你是否愿意承认：legend 的位置不是留给开发者调的——它是给辅助技术看的锚点，挪动它等于切断整组控件的语义身份。
