css中怎么把图爿底下放字

在CSS中，如果想要在一张图上方或下方添加文字，我们需要使用绝对定位和z-index属性。具体步骤如下： 1.为图像和文字创建父元素 我们需要为图像和文字各自创建一个父元素，以便在CSS中控制它们的位置。我们可以使用一个div元素，给它设置相对定位：

<div class="image-container">
  <img src="example.jpg" alt="example">
  <p>这是图片的说明文字</p>
</div>

2.设置图像的定位 首先，我们需要给图像设置绝对定位，将它从普通文档流中取出。然后，我们可以使用top和left属性来设置图像的位置。例如，我们想让图像在父元素中水平居中，可以设置left: 0和right: 0：

.image-container {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

3.设置文字的定位 现在，我们需要给文字设置绝对定位，让它在图像下方显示。我们可以使用top和z-index属性来控制文字的位置。例如，我们想让文字距离图像底部有一定的间隔，可以设置top: 100%和margin-top: 10px：

p {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  z-index: 1;
}

完整的CSS代码如下：

.image-container {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

p {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  z-index: 1;
}

这样，我们就能够在图像下方添加文字了。如果想要在图像上方添加文字，可以将top属性改为负值。