z-index不生效的根本原因是元素未进入层叠上下文；必须同时满足position为relative/absolute/fixed/sticky，且自身或祖先已创建层叠上下文（如设z-index、opacity
z-index 不生效，图片还是盖住文字
最常见的情况是：你写了 z-index: 999，但图片依然压着文字——根本原因是该元素没进入层叠上下文。只有同时满足两个条件，z-index 才真正起作用：position 必须是 relative、absolute、fixed 或 sticky；且它自身或某个祖先元素必须已创建层叠上下文（比如设置了 z-index 数值、opacity 小于 1、transform 非 none 等）。
容易踩的坑：
- 只给图片设
position: absolute和z-index，但文字容器没设position: relative，导致两者不在同一层叠上下文中比较 - 父容器用了
transform: translateY(0)，悄悄创建了新层叠上下文，子元素的z-index只在内部有效 - 误以为
z-index: auto（默认值）能参与排序，其实它完全不参与层叠计算
绝对定位图片尺寸失控、撑出容器
position: absolute 的图片脱离文档流后，浏览器不再用父容器高度约束它，尤其当只设了 width 没设 height 时，容易按原始比例拉伸或溢出。
实操建议：
- 明确设置
width和height，或用max-width: 100%+height: auto控制等比缩放 - 父容器必须设
position: relative，否则absolute图片会相对于html定位，位置不可控 - 避免依赖
top/left偏移来“挤”出空间——这解决不了尺寸问题，反而加剧重叠
响应式下图片在小屏重叠，flex/grid 也没用
这不是布局模式选错的问题，而是定位和层叠逻辑没随断点重置。比如桌面端用 absolute 叠加两张图，到了手机端，若没取消定位或重设 z-index，它们大概率挤成一团。
关键动作：
- 在媒体查询里显式重置定位：
@media (max-width: 768px) { .image-bg { position: static; z-index: auto; } } - 用
flex或grid布局时，确保图片容器没残留position: absolute——二者不能混用 - 检查
object-fit：对img标签设object-fit: cover可防止拉伸变形，间接减少重叠风险
多个绝对定位元素堆叠顺序混乱
不是数值越大就越靠前。当两个 absolute 元素的最近共同定位祖先没设 position: relative，它们的层叠顺序就由 HTML 出现顺序决定，z-index 彻底失效。
可靠做法：
- 为所有需要叠加的区域设一个统一的定位容器：
.overlay-container { position: relative; z-index: 0; } - 子元素用小范围整数：
z-index: 1（背景）、z-index: 2（文字）、z-index: 3（按钮），别用 9999 - 用浏览器开发者工具的「Layers」面板直接看层叠上下文树，比猜更准
复杂点在于层叠上下文嵌套——父级 z-index: 10 的容器里，子元素就算设 z-index: 9999，也超不过另一个 z-index: 20 的同级容器。这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
