Question

我知道如何通过提供图片position:relative;和文字position:absolute;将文字放在1张图片上，然后将文字放在我想要的位置。我的问题是我有一个我要放置文本的图像列表。我提到的解决方案不起作用，因为当我尝试定位文本时，所有这些都将具有相同的位置，我只看到一个文本。我相信你明白我的意思。只有使用CSS才能解决这个问题吗？

编辑：我应该提到这是一个垂直列表，所有图片都具有相同的left。 编辑2 ：文本和图片已经在容器中了！

感谢。

Answer 1

您应该将图像和文本嵌套在容器（div）中。然后，您将文本放在div中，将图像放在div中。这应该可以解决你的问题。

这是我的工作示例：

http://jsfiddle.net/kqYcT/

.image_container{ position: relative; }

.image_container img{
   position: relative;
   width: 200px;
   height: 100px;
   z-index: 1;
 }

.text{
   position:absolute;
   top: 70px;
   left: 35px;
   color: white;
   z-index: 2;
  }

Answer 2

css“position: relative”修改目标元素位置RELATIVE到父容器。解决方案是将两个项目放在父容器中。您将文本和图像“绑定”在一个包装容器中。

这是一个jsfiddle，你可以看到： http://jsfiddle.net/r2rCt/1/

例如：

<div>
<div class="text" style="position: relative; top: 20px; right: 20px;">Text</div>
    <img src="<your img URL>"></img>
</div>

如何将文本放在不同位置的不同图像上？

2 个答案: