CSS如何实现带有固定头尾的滚动弹窗_通过fixed背景与absolute内容css-css教程-PHP中文网

fixed遮罩层挡不住点击是因为z-index不足、缺少pointer-events:auto且未用inset:0；弹窗需三层嵌套+flex布局+min-height:0；ios需禁用body滚动并预置dom避免闪烁。

css如何实现带有固定头尾的滚动弹窗_通过fixed背景与absolute内容css

fixed 背景遮罩层为什么挡不住点击？

因为 fixed 元素默认层级不够，且未显式声明可交互区域。遮罩层（比如半透明黑背景）必须能拦截点击、阻止底层滚动，否则弹窗就“形同虚设”。

关键不是加 position: fixed，而是配齐三样：z-index、pointer-events: auto（别漏！）、inset: 0（比 top/left/bottom/right: 0 更稳）。

z-index 至少设为 1000 起，避开框架默认值（如 Ant Design 常用 1000，Element Plus 是 2000）
遮罩层必须写 pointer-events: auto —— 很多人以为默认就是，但一旦父容器有 pointer-events: none 或继承影响，它就失效
用 inset: 0 替代四边分别设 0，避免 Safari 下偶发渲染错位

absolute 弹窗内容如何固定头尾 + 中间滚动？

核心是“三层嵌套结构”：外层 absolute 定位弹窗容器 → 内层用 Flex 布局撑满 → 头尾设固定高度/弹性收缩，中间区域用 overflow-y: auto。

不能只靠 height: 100%，因为父级 absolute 容器若没明确尺寸，子元素百分比高度会失效。

外层弹窗容器必须设 width 和 max-height（比如 max-height: 90vh），否则在小屏下溢出不可控
内部用 display: flex; flex-direction: column，头部 flex-shrink: 0，尾部同理，中间区域 flex: 1; overflow-y: auto
中间滚动区要加 min-height: 0（Chrome/Firefox 默认不收缩，不加这句滚动条可能不出现）

.modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.modal-header, .modal-footer {
  flex-shrink: 0;
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}