在图像上放置多个文本项

Question

最简单的方法（使用css）在单个图像的顶部放置几个单独的文本项目是什么？

我有以下内容： -

<div>
    <img src="image.jpg"/>
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

使用CSS： -

div {
    position: relative;
}

div p {
    position: absolute;
    top: 0;
    left: 0;
}

但这不起作用，因为所有文本项都在彼此之上。 使用列表是最好的方法吗？或者还有另一种方式吗？

Answer 1

这样的事情：

div { position:relative; }
div img { position:absolute; top: 0; left: 0; }  
div p { position:relative; z-index: 2; }

但是这样div就会占据文本的高度，而不是图像。

Answer 2

DEMO

div { 
    position: relative;
}

div img { 
    position:absolute
}

div p {
    position: relative;
    top: 0;
    left: 0;
    color:#fff;
}

---

<强>更新

  

好的，这似乎有用 - 但我如何确保文本项目全部   包含在图像的范围内？这甚至可能吗？   理想情况下，我希望将文本项目显示在两个并行列表中。

DEMO

您需要将容器div的大小设置为img的大小。从那时起，您可以控制如何处理溢出
您可以在float:left; width:50%;上使用p，以便它们显示在两列中。