父容器必须设 position: relative，否则绝对定位文字无法正确锚定在图片上；应使用 div 包裹 img 和文字并设 position: relative，配合 top/left 与 transform 实现精准居中，背景用 rgba() 而非 opacity，z-index 需在同层叠上下文中生效。
父容器必须设 position: relative
绝对定位的文字不会自动“粘”在图片上，它只认最近的已定位祖先。如果没给图片外层加 position: relative，文字就会往上找——可能落到 body 里，甚至被页眉遮住。这不是可选项，是硬性前提。
常见错误包括：
- 只给文字加
position: absolute，图片直接裸写在 HTML 里 - 把
position: relative加在main或section这类大容器上，结果所有子项文字都以它为锚点，全飘了 - 用
img标签自身设position: relative——img是替换元素，设了也不创建定位上下文
正确做法：用一个 div 包住 img 和文字层，这个 div 必须有 position: relative，且最好显式设 min-height 或 aspect-ratio，避免图片加载中或失败时容器塌陷，导致文字定位基准丢失。
top/left 和 transform 要配合用
单靠 top: 50%; left: 50% 只是把文字盒左上角移到中心，不是文字居中。必须加 transform: translate(-50%, -50%) 才真正对齐视觉中心——尤其当字体大小、行高、padding 变化时，这比手动算 margin 或靠 text-align 可靠得多。
其他常用组合：
- 右上角标签：
top: 8px; right: 8px;，不用transform，简单直接 - 底部说明栏：
bottom: 0; left: 0; width: 100%; padding: 12px;，再配background: rgba(0,0,0,0.7) - 响应式居中：用
top: 50%; left: 50%; transform: translate(-50%, -50%)，不依赖容器宽高值
别用 margin-top 或 margin-left 替代 top/left ——它们还在文档流里占位，而且缩放时像素对不齐。
背景半透明必须用 rgba()，不能用 opacity
opacity: 0.7 会让整个文字容器（包括字体、阴影、图标）一起变淡，可读性断崖下跌。而 background-color: rgba(0, 0, 0, 0.7) 只影响背景色，文字本身保持 100% 清晰度。
注意兼容性：
-
rgba()支持 IE9+，老项目要兼容 IE8 就得换半透 PNG 背景图 - 如果遮罩层里有伪元素（比如
::before图标），opacity会把它也变虚，rgba不会 - 移动端 Safari 对
rgba()渲染稳定，但某些安卓 WebView 在低电量模式下可能轻微偏色，加will-change: transform可缓解
z-index 生效的前提和常见失效场景
z-index 不是万能开关。它只在同一个层叠上下文中起作用。如果父容器意外触发了新层叠上下文（比如加了 opacity: 0.99、transform: scale(1) 或 isolation: isolate），那里面设 z-index: 9999 也没用——它只在该父容器内部有效。
确保文字浮层真正在图片之上，需同时满足：
- 文字层设
position: absolute（否则z-index无效） - 父容器有
position: relative（提供层叠上下文） - 文字层
z-index值大于同级兄弟元素（如其他absolute组件）；若图片本身z-index设成-1，文字至少得设1 - 检查是否被
overflow: hidden裁剪——父容器若设了这个，文字超出部分直接消失，哪怕z-index再高也看不见
最易被忽略的是：文字层默认 pointer-events: auto，如果它挡住了图片的点击区域（比如图片是链接），又没做交互处理，用户就点不到图了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
