position: absolute 脱离文档流导致父容器高度塌陷，因绝对定位元素不参与常规流尺寸计算；解决需显式设高、用非脱离流元素撑高，或改用 relative/flex/grid 布局。
position: absolute 为什么脱离文档流后父容器高度塌陷
父元素没设高度，子元素用 position: absolute 后，父容器就“看不见”它了，高度直接变成 0。这不是 bug，是规范行为——绝对定位元素不参与常规流尺寸计算。
- 解决方法：给父容器显式设置
height或min-height，或者用其他非脱离流的元素撑高（比如一个空的div加clear: both） - 更稳妥的做法是换布局思路：用
position: relative父容器 +top/left微调，或改用flex/grid实现类似效果 - 注意：如果父容器本身是
position: static（默认），absolute子元素会相对于最近的position: relative/absolute/fixed祖先定位；找不到就相对 viewport 定位——这点常被忽略，导致位置飘移
fixed 定位在 iOS Safari 上滚动时闪动或错位
iOS Safari 对 position: fixed 的实现有历史兼容问题，尤其在页面滚动、键盘弹出、地址栏收放时，fixed 元素可能卡住、跳动甚至消失。
- 常见诱因：父容器用了
transform（比如translateZ(0)）、will-change或overflow: hidden - 临时缓解：给
fixed元素加backface-visibility: hidden和-webkit-transform: translateZ(0)，但治标不治本 - 真正可靠的方式是避免在关键交互区域（如导航栏、返回按钮）强依赖
fixed；改用position: sticky（iOS 15.4+ 支持良好）或 JS 监听scroll动态更新top
z-index 失效：为什么明明写了 9999 还是被盖住
z-index 不是全局层叠编号，它只在同一个“层叠上下文”内生效。父元素一旦创建了新的层叠上下文（比如设置了 opacity: 0.99、transform、filter 或 will-change），它的子元素 z-index 就只能在这个小范围内比较。
- 检查是否误在父级加了
opacity: 0.99（哪怕只是 0.99，也会触发新层叠上下文） - 用浏览器开发者工具的“Layers”面板或“Computed”标签页，看元素是否意外进入了某个
stacking context - 调试技巧：给疑似干扰的祖先元素临时加
outline: 1px solid red，快速定位层级结构 - 不要盲目堆
z-index: 999999，优先理清层叠上下文边界
sticky 定位在 Chrome 里不触发，但 Firefox 正常
position: sticky 需要满足两个硬性条件才能生效：父容器必须有可滚动区域（即 overflow: visible 以外的值，但 overflow: clip 除外），且元素自身必须有明确的 top / bottom 偏移值。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：父容器是
overflow: hidden，但又希望 sticky 在内部滚动时生效 —— 这不行，得改成overflow-y: auto并确保内容足够长 - 另一个坑：
sticky元素如果被设了float或display: inline-block，在旧版 Chrome（ - 兼容性底线：Chrome 56+、Firefox 54+、Safari 15.4+；IE 完全不支持，需降级为 JS 滚动监听
定位布局真正的复杂点不在语法，而在各种 CSS 属性之间隐式的相互影响——transform 悄悄创建层叠上下文，overflow 悄悄截断 sticky，opacity 悄悄改变渲染层级。这些不是写一次就能忘的配置，而是每次调整都要重新验证的链式反应。
