脱离文档流致父容器高度塌陷，需用relative+transform或伪元素清除；z-index仅对已定位元素有效，注意层叠上下文嵌套；absolute参考最近已定位祖先，fixed需预留占位并慎用transform。
定位元素脱离文档流后父容器高度塌陷
用 position: absolute 或 position: fixed 的元素会脱离文档流，导致父容器无法感知其尺寸，常见表现为父容器高度为 0、内部其他元素上移、背景色/边框消失。
解决方法不是硬加 height，而是根据场景选：
- 若父容器本应包裹子元素，改用
position: relative+top/left微调，或用transform: translateY()替代偏移（不脱离流） - 若必须用
absolute，且父容器需撑开，手动设置父容器min-height或通过伪元素清除塌陷：::after { content: ""; display: table; clear: both; } - 检查父容器是否本身也用了
position: absolute/fixed—— 多层脱离流会让布局完全失控
z-index 不生效，元素层级混乱
z-index 只对「已定位元素」（即 position 值为 relative、absolute、fixed 或 sticky）有效。常见错误是给 position: static 元素设 z-index，浏览器直接忽略。
更隐蔽的问题是层叠上下文（stacking context）嵌套：
立即学习“前端免费学习笔记（深入）”；
- 父元素设置了
opacity: 0.99、transform、filter或will-change，会创建新层叠上下文，子元素的z-index只在该上下文内生效 - 检查 Chrome DevTools 的「Layers」面板，看是否意外触发了多层 stacking context
- 优先用
position: relative+z-index控制局部层级，避免全局堆叠值（如写成z-index: 9999）
absolute 定位参考点不是预期父容器
position: absolute 的元素会向上查找**最近的已定位祖先元素**（position ≠ static）作为定位参考。如果找不到，就相对于 viewport 定位 —— 这常导致“明明写了 left: 0，却飞到页面左上角外”的现象。
快速排查步骤：
- 在 DevTools 中逐级查看父元素的
position值，确认是否有意设置了relative等 - 若父容器本应是参考点但没生效，检查它是否被其他 CSS（如
display: flex或transform）隐式创建了新的包含块 - 临时加一句
outline: 1px solid red到疑似父容器，看视觉边界是否匹配预期定位范围
fixed 定位元素随滚动“错位”或遮挡内容
position: fixed 元素脱离普通文档流，且固定在视口坐标系中。问题常出在：它和页面其他部分没有做滚动联动，或未预留占位空间。
- 导航栏用
fixed后，下面的内容会“上移”，解决方式是在body或首个内容容器上加padding-top，值等于 fixed 元素高度 - 某些安卓 WebView 或 iOS Safari 下，
fixed在输入框弹起软键盘时失效，此时建议降级为position: sticky（支持性够用）或监听resize事件动态修正 - 避免对
fixed元素使用transform动画 —— 部分旧版浏览器会触发重绘异常，造成闪烁或错位
position 值，也可能让下方三层子元素的定位行为全变。调试时盯住「谁是包含块」「谁创建了层叠上下文」这两条线，比反复调 z-index 和 top 更省时间。 
