必须给details加position: relative或在其内部嵌套wrapper设该属性，否则absolute子元素会相对于body等祖先定位；同时确保summary为details的第一个直接子节点，避免空格、注释或动态渲染导致结构失效。
details 里不能直接用 absolute 定位子元素
因为 details 默认不是定位上下文（即没有 position: relative），子元素设 position: absolute 会向上找最近的非 static 祖先，通常落到 body 或某个布局容器上，导致位置完全失控。
常见错误现象：给 details 内部的 div 加 position: absolute; right: 0;，结果它贴到了整个视口右上角，而不是 details 右侧。
- 想让子元素相对
details定位，必须显式给details加position: relative - 但要注意：
details是替换元素（replaced element-like），部分浏览器对它的position支持不一致，尤其在 Safari 中可能影响展开动画或焦点行为 - 更稳妥的做法是：在
details内部加一层 wrapperdiv，再给这个 wrapper 设position: relative
summary 必须是 details 的第一个直接子节点
这是所有定位和交互失效的根源之一。只要 summary 前面有空格、换行、注释或任何其他节点，浏览器就不再识别它为触发器——此时你连点击展开都做不到，更别说定位子元素了。
正确结构只有一种：<details><summary>摘要</summary>内容</details>。别套 div，别加注释，别用 Vue/React 的 v-if 动态插入时意外留下文本节点。
立即学习“前端免费学习笔记（深入）”；
- Vue 中用
v-if控制summary渲染？确保它始终是details的第一个子节点 - React 中用条件渲染？避免写成
{show && <summary>...</summary>}，中间可能插入 falsy 值变成文本节点 - Safari 对结构错误最敏感；Chrome 可能“容错”但行为不可靠
details 展开后内容区域怎么精确定位子元素
details 展开时，内部内容会自然流入文档流，此时定位逻辑和普通块级容器一样：父容器需有 position: relative，子元素才能用 absolute 相对它偏移。
但注意两点：
- 不要给
details[open]动态加position: relative—— 这会触发重排，且 Safari 下可能造成展开动画卡顿 - 推荐方案：始终给包裹内容的内部容器（比如
<div class="details-content">）设position: relative，不管details是否展开 - 如果要用
transform: translate()居中，优先选这个而非top/left/margin，避免依赖宽高
summary 里的图标或按钮怎么右对齐又不影响语义
很多人想把「展开箭头」或操作按钮放在 summary 右侧，但直接用 float: right 或 display: flex; justify-content: flex-end 容易破坏可访问性——屏幕阅读器可能跳过，键盘用户无法聚焦。
安全做法是保留 summary 的原生语义，仅视觉调整：
- 用
summary::after插入图标，配合details[open] summary::after切换状态 - 若需放真实按钮（如「复制」），把它作为
summary的最后一个子元素，用margin-left: auto（需display: flex）或text-align: right+inline-block对齐 - 绝对禁止给
summary设pointer-events: none，否则点击失效
真正难处理的不是定位本身，而是保持语义、可访问性和浏览器兼容性的三角平衡。哪怕只是加个右对齐按钮，也要先确认它是否仍能被键盘 Tab 到、被读屏器朗读、在 Safari 中正常响应 toggle 事件。
