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