details 元素不可直接设为 position: absolute，否则会导致 summary 点击热区偏移或失效；正确做法是将其包裹在 position: relative 的容器中，通过 details[open] 控制展开内容绝对定位浮出。
details 元素本身不能直接设为 position: absolute
浏览器对 details 的渲染有隐式约束：它默认是块级流内元素，但一旦加 position: absolute，会脱离文档流，导致其内部 summary 的点击热区偏移或失效——尤其在 Safari 和旧版 Chrome 中，summary 的原生焦点和触发逻辑依赖于父容器的流式上下文。这不是样式问题，而是定位后浏览器无法正确映射交互坐标。
真正可行的做法是：把 details 包进一个合法的相对定位容器（如 div），再让它的子内容（比如展开后的面板）用绝对定位浮出：
-
div容器设position: relative，作为定位参考系 -
details保持默认position: static，确保summary正常响应 - 展开后的内容区域（如
<summary></summary>后的<p></p>或<div>）用 <code>position: absolute+z-index浮起 - 需手动控制该浮层的
top/left，并监听toggle事件动态调整位置（例如紧贴summary底部）
用 details[open] 触发绝对定位浮层显示
不要靠 JS 改 style.display 控制显隐，否则会绕过原生状态、丢失 toggle 事件。正确方式是用 CSS 选择器配合 open 属性：
details > *:not(summary) {
display: none;
}
details[open] > *:not(summary) {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
border: 1px solid #ccc;
z-index: 1000;
margin-top: 4px;
}
注意几点：
-
*:not(summary)确保只选中展开内容，不干扰summary自身布局 -
top: 100%让浮层紧贴summary底边，比写死top: 40px更可靠 - 若父容器有
padding或border，需用transform: translateY(...)微调，避免错位 - 移动端要加
touch-action: auto，否则 iOS Safari 可能拦截滚动
表格行内使用 details + 绝对定位的避坑要点
直接把 details 塞进 <td> 或 <code><tr> 是非法结构，浏览器会自动修复 DOM，导致定位参考系错乱、<code>toggle 事件丢失。必须换结构：
- 放弃原生
table，改用display: grid模拟列对齐，每行用div包裹“单元格” - 每个“单元格”内放
details，其展开内容用绝对定位浮出，并设overflow: visible防截断 - 浮层宽度不能依赖
100%（grid 子项可能压缩），建议用min-width: max-content或固定值 - 若浮层内容过长，需加
max-height: 300px+overflow-y: auto，否则会撑破视口
为什么 summary 里不能放 position: absolute 子元素
summary 是原生可聚焦、可键盘操作的交互元素，其内部布局受浏览器 UA 样式强约束。一旦给它的子节点设 position: absolute，容易引发三类问题：
- Safari（≤17.5）会忽略该子元素的点击穿透，导致
summary自身热区变窄甚至失效 - 屏幕阅读器可能跳过绝对定位内容，破坏语义流
- 当
summary被设为display: flex时，absolute子元素的top/left参考系会变成 flex 容器而非视口，行为不可控
真需要图标或 badge，应放在 summary 外部（如右侧 span），或用 summary::after 伪元素——它不参与 DOM 树，不影响焦点和语义。
