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

Question

我知道如何通过提供图像position:relative;和文本将文本放置在 1 个图像上position:absolute;，然后将文本放置在我想要的位置。我的问题是我有一个要在其上放置文本的图像列表。我提到的解决方案不起作用，因为当我尝试定位文本时，它们都将具有相同的位置并且我只看到一个文本。我相信你明白我的意思。仅通过使用 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" 将目标元素位置相对于父容器修改。解决方案是将这两个项目放在父容器中。您将文本和图像“绑定”在一个包装容器中。

这是一个 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>