展开时悬浮覆盖在其他元素之上
" />
本文详解如何通过 css 的 `position: absolute` 与 `z-index` 组合，使 `
默认情况下，<details> 是流式块级元素，展开后会自然撑开父容器高度，导致后续卡片被下推——这正是提问者遇到的问题（见原图 behavior）。要实现「点击摘要后详情内容悬浮覆盖」效果，核心思路是：让 <details> 在展开时脱离正常文档流，并赋予更高堆叠层级。
✅ 正确实现步骤
为每个 .citas 设置 position: relative
这是为了让其内部绝对定位的 <details> 以它为参考系进行定位，避免全局偏移。-
将 <details> 设为 position: absolute 并控制尺寸与层级
- position: absolute 使其脱离流式布局；
- width: 100% 确保宽度匹配父容器（.citas）；
- z-index: 1000 保证始终位于其他卡片之上；
- margin-left: -10px 和 padding-left: 10px 用于视觉对齐（抵消默认缩进，可按需调整）；
- box-sizing: border-box 防止内边距影响宽度计算。
补充基础样式增强体验
建议为 <summary> 添加光标提示和简明过渡（非必需但推荐）：
.citas {
padding: 10px;
background-color: antiquewhite;
margin: 30px;
padding-bottom: 20px; /* 为展开内容预留视觉空间 */
position: relative; /* 关键：作为 details 的定位上下文 */
}
details {
position: absolute;
top: 100%; /* 紧贴图片/summary 下方 */
left: 0;
width: 100%;
background-color: antiquewhite;
border: 1px solid #ccc;
border-radius: 4px;
padding: 12px;
box-sizing: border-box;
z-index: 1000;
margin-top: 5px; /* 微调间距 */
}
details[open] {
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
summary {
cursor: pointer;
font-weight: bold;
user-select: none;
}⚠️ 注意事项
- z-index 仅对已定位元素（即 position 值为 relative/absolute/fixed/sticky）生效；未设置 position 时声明 z-index 无效。
- 若页面存在其他绝对定位组件（如侧边筛选栏 #filtros），需确保其 z-index 不高于 <details>（例如设为 999），否则可能被遮挡。
- position: absolute 会使 <details> 不再占据文档流空间，因此父容器 .citas 的高度不会随展开而变化——这是实现“覆盖”效果的前提，也是与默认行为的本质区别。
- 如需响应式适配，建议用 max-width 替代固定 width，并配合 left: 0; right: 0 更稳健地控制宽度。
✅ 最终效果验证
点击任意 <summary> 后：
- 对应 <details> 从顶部向下平滑展开；
- 完全覆盖下方相邻的 .citas 卡片，不引起布局位移；
- 多个 <details> 可同时展开，彼此独立，互不影响堆叠顺序（因同属 .citas 相对定位上下文，且 z-index 统一）。
该方案简洁可控，适用于中低复杂度的卡片式信息展示场景。若未来需支持拖拽、动画联动或无障碍深度优化，可进一步结合 JavaScript 监听 toggle 事件或使用 prefers-reduced-motion 媒体查询增强兼容性。
