最可靠的方式是父容器设 position: relative，子元素用 position: absolute 并配合 top/right/bottom/left 定位到任意角落，同时需设置 z-index 防遮挡、img 设 display: block 消除空白、适配移动端单位。

直接用 position: relative + position: absolute 是最可靠、浏览器兼容性最好、调试也最直观的方式。其他方案（比如 background-image、mask、canvas）要么语义缺失，要么移动端行为不一致，要么根本不能精确定位到“任意角落”。

为什么必须给父容器设 position: relative

因为 position: absolute 的文字会去找最近的「已定位祖先元素」作为定位参考。如果漏掉这一步，文字就会相对于 定位，瞬间飘到页面左上角，和图片完全脱节。

• 父容器可以是 <div>、<code><figure></figure> 或任何块级元素，但必须显式写 position: relative
• 别依赖 display: inline-block 或 float 来“间接触发定位”，它们不构成定位上下文
• 如果父容器本身是 flex 或 grid 容器，position: relative 依然要加——flex/grid 不等于定位上下文

top/right/bottom/left 怎么选才真正“任意角落”

四个方向属性组合使用，才能自由锚定在任意角：左上用 top: 0; left: 0，右下用 bottom: 0; right: 0，右上用 top: 0; right: 0，左下用 bottom: 0; left: 0。避免混用 transform 居中逻辑（如 translate(-50%, -50%)），那属于居中需求，不是“角落”需求。


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
• 数值可为像素（top: 12px）、百分比（right: 5%）、calc()（bottom: calc(100% - 24px)）
• 移动端慎用固定像素值；优先用百分比或视口单位（vh/vmin）适配缩放
• 如果图片宽高不固定（比如 width: 100%; height: auto），父容器必须有明确高度（如 aspect-ratio: 16/9），否则 bottom/right 可能失效

文字被图片盖住？检查这三个地方

遮罩文字看不见，90% 是这三个配置没到位：

• z-index 值太小或没设：即使父容器是 relative，绝对定位文字默认堆叠层级仍可能低于图片（尤其当图片有 z-index）；显式写 z-index: 2 或更高
• img 没设 display: block：行内图片自带底部空白（baseline 空隙），会导致父容器高度计算错误，进而让 absolute 文字定位偏移
• 文字颜色与图片背景冲突：比如白字压在雪景图上就看不清；加 text-shadow（text-shadow: 1px 1px 2px black）或包裹一层半透背景更稳妥

真正难的不是“怎么放上去”，而是“放上去之后在各种缩放、换图、换设备时还稳在角落”。所以别省那两行 position: relative 和 z-index，它们不是装饰，是定位契约的基石。