文字压不到图片是因层级未正确设置：文字和图片需同属一个层叠上下文，且都必须为已定位元素（如position: relative）才能使z-index生效。
文字压到图片上，本质是元素层级（stacking order）没安排好。关键不是单纯加 z-index，而是要让 z-index 生效——它只对**已定位元素**（即 position 值为 relative、absolute、fixed 或 sticky）起作用。
确保文字和图片都在同一个层叠上下文里
如果图片父容器用了 transform、opacity < 1 或 will-change 等属性，可能意外创建了新的层叠上下文，导致文字的 z-index 被“截断”在局部范围内。此时即使文字 z-index: 999，也盖不过父级层叠上下文外的图片。
- 检查图片或其祖先是否无意中触发了新层叠上下文（用浏览器开发者工具的“Computed”面板看
contain和transform等） - 尽量让文字和图片的最近共同父容器是同一个层叠上下文根（比如给它加
position: relative，但不加其他触发属性）
给文字加定位并设更高 z-index
文字默认是 static，z-index 对它无效。必须显式定位：
- 给文字容器（如
<div>或<p>）设置position: relative（保持文档流）或position: absolute（脱离流，需配合top/left定位） - 同时设置
z-index: 2或更高（图片容器设z-index: 1即可） - 注意：若用
absolute，其定位参考的是最近的已定位祖先，不是整个页面
图片本身别乱设 z-index
<img> 标签默认是 static，直接加 z-index 没用。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 把图片包进一个
<div>，给这个容器设position: relative和z-index: 1 - 或者直接给
<img>加position: relative（不影响显示），再设z-index - 避免给图片设
position: absolute后又忘记调整文字定位参考点
快速验证技巧
打开浏览器开发者工具，选中文字元素，在 Styles 面板手动加上：
position: relative;z-index: 10;
再选中图片，同样加 position: relative 和 z-index: 1，看是否立刻生效——这是最直接的调试方式。
基本上就这些。不复杂但容易忽略定位前提，一试便知。
