css设置图片左上角加文字

要在图片的左上角添加文字，可以使用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属性较低的元素之上。