重叠是布局失控的信号，根源在于元素占位逻辑错误；需用flex-wrap: wrap防溢出、gap替代margin、设置子项收缩能力，并清除white-space: nowrap等刚性约束。
重叠不是bug，是布局失控的信号——关键不在“盖住谁”，而在“谁该占位、谁该让位、谁该换行”。
flex-wrap: wrap 为什么必须加，不加就重叠
默认 flex-wrap: nowrap 会强行把所有子项塞进一行，哪怕容器只有 300px 宽，五个 div 也硬挤，结果就是溢出+视觉重叠。
- 加
flex-wrap: wrap后，子项在空间不足时自动折行，这是最直接的防重叠手段 - 配合
gap（别用margin）能避免换行错位，gap不参与计算，更可靠 - 子项必须设收缩能力：
flex: 0 1 minmax(280px, 1fr)或至少min-width: 280px，否则小屏下会被压成一条线 - 如果用了
white-space: nowrap或未约束宽高的图片，flex-wrap也会失效——先清掉这些“刚性元素”
grid auto-fit + minmax 为什么比固定列数稳
grid-template-columns: repeat(3, 1fr) 在 400px 屏幕上会把三列硬压成窄条，文字和图片挤在一起；而 repeat(auto-fit, minmax(280px, 1fr))) 会动态退化为单列，不留缝隙也不重叠。
-
auto-fit会合并空轨道，auto-fill保留空轨道，日常选auto-fit -
minmax(280px, 1fr)表示“至少 280px，有剩余就均分”，不是“最大 280px” - 别只写
grid-auto-flow: column，它会让内容纵向无限延伸，反而引发滚动重叠 - 调试时打开浏览器的“Layout”面板，勾选“Show grid line numbers”，一眼看出格子是否被误占
z-index 失效的三个真实原因
写了 z-index: 999 还是被盖住？大概率不是值不够大，而是层叠上下文断了。
立即学习“前端免费学习笔记（深入）”；
- 父容器有
transform、opacity: 0.99、filter或will-change→ 自动创建新 stacking context，子元素z-index只在内部生效 - 两个绝对定位元素分别在不同父容器里，且父容器都触发了上述任一条件 → 它们根本不在同一层叠上下文里，比大小无意义
- 元素没设
position: relative/absolute/fixed/sticky→z-index直接被忽略，连解析都不解析 - 临时验证：给疑似“盖不住”的父容器加
outline: 1px solid red，看是否意外被裁切或缩放
img 和 textarea 重叠的隐藏开关：min-width: 0
Flex 容器里，<img> 默认有 min-width: auto（等效于 min-content），它拒绝压缩到自身固有尺寸以下，于是把旁边的 <textarea> 挤出视口——看着像重叠，其实是溢出。
- 只需一条
img { min-width: 0; }，就能让它真正参与 flex 收缩计算 - Bootstrap 的
.col-md-6里尤其高频，因为栅格本身是 flex 容器 - 别试图用
max-width: 100%解决——它只管最大宽度，不管最小宽度 - 同理适用于
<video>、<iframe>等替换元素，它们都有相同默认行为
重叠问题最难缠的地方不在代码怎么写，而在“你以为它在文档流里，其实它早就脱离了”。检查每个可疑元素的 computed position 和 display，比反复调 z-index 有用得多。
