要在图片的左上角添加文字，可以使用CSS的position属性来定位文字元素，然后使用z-index属性来确保文字在图片上方显示。以下是示例CSS代码：
css：
.container {position: relative;
}.text {position: absolute;top: 0;left: 0;z-index: 1;color: white;font-size: 16px;background-color: rgba(0, 0, 0, 0.5);padding: 5px;
}你可以将上面的CSS代码应用于包含图片和文本的父容器上，如下所示：
html：
<div class="container">
<img src="your-image.jpg" alt="Your Image">
<div class="text">Your Text</div>
</div>
请注意，上述代码中的`.container`是用来包裹图片和文本的父容器的类名，`.text`是用来添加文字的元素的类名。你可以根据需要自行修改这些类名和属性值。
CSS的position属性用于设置元素的定位方式。
position属性有以下几个取值：
1. static（默认）：元素按照正常文档流进行布局，忽略top、right、bottom、left和z-index属性。
2. relative：元素相对于其正常位置进行定位，可以使用top、right、bottom、left属性来调整位置。相对定位不会引起元素脱离文档流。
3. fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素仍然固定在指定位置。也可以通过top、right、bottom、left属性来调整位置。
4. absolute：元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，那么相对于最初的包含块（通常是body元素）。也可以通过top、right、bottom、left属性来调整位置。绝对定位会导致元素脱离文档流，其他元素不再考虑该元素的位置。
5. sticky：粘性定位是相对定位和固定定位的结合体。元素在跨越特定阈值前是相对定位的，之后变为固定定位。
以下是一个使用position属性的例子：
```css
.container {
position: relative;
}
.box {
position: absolute;
top: 50px;
left: 50px;
}
```
在上面的例子中，`.container`是一个相对定位的元素，`.box`是一个绝对定位的元素，并且相对于`.container`元素进行定位。通过设置top和left属性，我们可以调整`.box`元素在`.container`内的位置。
请注意，position属性可以与z-index属性一起使用，来调整元素的层叠顺序。z-index属性较高的元素将显示在z-index属性较低的元素之上。
