html - 在图像上定位多个文本项

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 将采用文本的高度，而不是图像的高度。