css中文字怎么放在图片顶部

在网页制作中，我们经常需要将文字与图片结合起来，形成一个完整的效果。但是，当我们想要让文字放在图片的顶部时，就需要使用CSS来控制。
在CSS中，我们可以使用“position”属性来控制元素的定位方式。在这里，我们可以将图片的定位方式设置为“相对定位”，然后将文字的定位方式设置为“绝对定位”。
代码示例：

p {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: 0;
 padding: 20px;
 color: #fff;
 text-align: center;
 font-size: 18px;
 background: rgba(0,0,0,0.6);
}

img {
 position: relative;
} 

在上述代码中，我们将“p”标签的位置设置为“绝对定位”，并将底部、左侧和右侧设置为“0”。这样，文字就会放在图片的底部。同时，我们设置了一些样式，如背景、字体颜色和大小等。
而对于图片，我们将其位置设置为“相对定位”，这样就可以将文字放到图片的顶部了。
需要注意的是，这种方法只适用于图片高度固定的情况下。如果图片高度不固定，就需要使用JS来进行计算和调整。
总之，在网页制作中，控制文字和图片的位置是非常重要的一部分。通过使用CSS的定位属性，我们可以实现更加丰富和独特的效果。