定位重叠根源在于absolute元素未找到relative父容器而相对body定位，z-index失效因跨层叠上下文，Float未清除致塌陷，flex/Grid溢出因未设换行或弹性宽度。
元素用了 position: absolute 却跑出预期位置
这是最常见重叠根源：一旦父容器没设 position: relative，absolute 元素会逐层向上找最近的「定位上下文」，可能直接相对于 body 定位，和其他元素撞在一起。
- 检查目标元素的**所有父级**，直到
html，看哪个设置了position: relative / absolute / fixed / sticky - 如果只是想让子元素相对当前容器定位，**必须在直接父容器上加
position: relative**（哪怕它本身不需要偏移） - 注意：
position: Static（默认值）不构成定位上下文，不能作为参考父级
z-index 不生效，明明写了却压不住其他元素
z-index 只对「定位元素」（position 值不是 static）起作用；更关键的是，它只在**同一个层叠上下文（stacking context）内**比较。父级一旦创建了新的层叠上下文（比如设置了 opacity: 0.99 或 transform: translateZ(0)），子元素的 z-index 就无法越过该父级去和外部元素比高低。
- 用浏览器开发者工具的「Computed」面板，查目标元素的
stacking context是否被意外创建 - 避免在父容器上滥用
opacity、Filter、transform（非none值）、will-change等触发新层叠上下文的属性 - 确认所有参与层级竞争的元素都处于同一层叠上下文中，否则调
z-index: 9999也没用
浮动（float）导致后续元素塌陷并重叠
虽然现在少用 float 布局，但老项目或某些内联排版场景仍存在。浮动元素脱离文档流，若父容器没清除浮动，高度会坍缩，导致后面元素“爬”上来盖住它。
- 检查浮动元素的父容器是否漏了清除机制，比如没加
overflow: hidden、clearfix类，或没用::after伪元素清浮 - 现代替代方案优先用
display: flex或display: grid，它们天然不产生文档流脱离问题 - 如果必须保留
float，确保紧随其后的元素有clear: both，或父容器有明确高度/清除策略
Flex/Grid 子项溢出容器却不换行或截断
当 flex-wrap: nowrap（默认）且子项总宽超过容器，或 grid-template-columns 设了固定列宽但内容过长，子项会强行挤在一起甚至视觉重叠（尤其配合 min-width: 0 或 white-space: nowrap 时）。
立即学习“前端免费学习笔记（深入）”；
- 对 Flex 容器，检查
flex-wrap是否为nowrap；需要自动换行就设flex-wrap: wrap - 对 Grid 容器，避免全用
px或fr固定分配，可搭配minmax(0, 1fr)或auto-fit+minmax()让列弹性伸缩 - 给可能溢出的子项加
min-width: 0（Flex/Grid 中防止内容撑宽）和overflow: hidden+text-overflow: ellipsis（文字截断）
.container { display: flex; flex-wrap: wrap; /* 关键：允许换行 */ } .item { min-width: 0; /* 防止文本强制撑宽 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }重叠问题本质是渲染层坐标与层叠顺序失控，不是样式写得“不够多”，而是定位模型理解偏差或上下文边界被无意打破。盯住 position 的参考点、z-index 的作用域、以及布局模式（Float/Flex/Grid）各自的流式规则，比盲目加 !important 有效得多。