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

【问题标题】：How to place text over different images with different positions?如何在不同位置的不同图像上放置文本？
【发布时间】：2013-05-11 01:32:03
【问题描述】：

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

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

谢谢。

【问题讨论】：

标签： html css image positioning css-position

【解决方案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;
  }

【讨论】：

它们已经在一个容器中。我尝试给图像一个 z-index 并将其定位为绝对位置和正常位置，但我无法让它工作。我在等你的例子，谢谢。
哈哈。几乎同时给出了相同的答案。 :)
我刚刚发布了一个 jsfiddle，您可以在其中查看我的实现。

【解决方案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>

【讨论】：

如果你不介意我会接受 Stefan 的回答，因为他在做例子 :) 当然会支持你的！
对我有好处。只是在这里提供帮助（并且试图在这个网站上的 1000 名其他优秀开发人员之前得到答案是很棘手的！:)