绝对定位本身不直接作用于背景图，但能让你把文字“钉”在背景图的任意位置，且不受文档流干扰；z-index 控制的是文字容器与背景容器之间的前后关系，不是文字和背景图之间——背景图永远在容器内部底层。
绝对定位本身不直接作用于背景图，但能让你把文字“钉”在背景图的任意位置，且不受文档流干扰；z-index 控制的是文字容器与背景容器之间的前后关系，不是文字和背景图之间——背景图永远在容器内部底层。
为什么不能直接给背景图设 z-index
z-index 只对定位元素（position 不为 static）生效，而背景图是元素的装饰属性，不是独立元素。你看到的“背景图上浮文字”，其实是：一个带背景图的容器 + 一个 position: absolute 的文字子元素，二者通过层级配合实现视觉叠加。
- 给文字加
position: absolute后，它才获得使用z-index的资格 - 背景图所在的父容器必须有
position: relative（或其他非static值），否则文字会相对于body定位，失去对齐锚点 - 若文字容器没设
z-index，它默认在父容器的层叠上下文中处于“源码顺序层”，可能被兄弟元素意外遮挡
文字精准定位的关键：父容器 position: relative + 子元素 position: absolute
这是最常用也最可靠的模式，俗称“子绝父相”。父容器承担两个角色：提供定位参考点、承载背景图；子元素脱离文档流，用 top/left 精确落点。
- 父容器必须显式设置
position: relative（哪怕不偏移），否则absolute子元素会上溯到最近已定位祖先，容易错位 - 文字容器推荐设
z-index: 1或更高（如z-index: 10），避免被同级其他absolute元素覆盖 - 用
transform: translate(-50%, -50%)配合top: 50%; left: 50%实现居中，比手动算 margin 更可靠 - 如果背景图用了
background-size: cover，文字定位应基于容器尺寸，而非图片原始比例
多层内容叠加时，z-index 数值要分层管理
当页面同时存在导航栏、模态框、页脚背景图文字等，所有 z-index 必须在一个全局尺度下协调，否则会出现“高数值文字被低数值遮罩盖住”的反直觉现象。
- 检查父容器是否意外创建了新层叠上下文：比如页脚容器加了
opacity: 0.99或transform: scale(1)，就会让内部文字的z-index: 9999仅在该页脚内有效 - 建议按功能划分层级区间：
--z-footer-text: 10、--z-navbar: 100、--z-modal: 1000，用 CSS 自定义属性统一维护 - 文字容器的
z-index只需略高于其父容器的默认层即可，不必盲目设成9999；真正需要高值的是全局遮罩或弹窗这类跨区域组件
调试时最容易忽略的三件事
浏览器开发者工具里看到的渲染顺序，和你写的 CSS 层级不一致，往往是因为这些隐性条件没被识别：
- 父容器没设
position，导致文字定位基准错误——用 Elements 面板检查文字元素的 computedposition和offsetParent - 文字容器的
z-index生效了，但它所在的父容器自己被另一个设置了opacity: 0.99的兄弟容器盖住了——打开 Layers 面板，看实际绘制的堆叠上下文树 - 背景图用了多层
background-image，你以为某张图在顶层，其实声明顺序写反了——检查 computed styles 中background-image的 URL 列表顺序
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
