将几个单独的文本项放置在单个图像顶部的最简单方法(使用 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;
}
但这行不通,因为所有的文本项都在另一个之上。 最好的方法是用列表来做吗?还是有别的办法?
最佳答案
像这样:
div { position:relative; }
div img { position:absolute; top: 0; left: 0; }
div p { position:relative; z-index: 2; }
但这样 div 将采用文本的高度,而不是图像的高度。
关于html - 在图像上定位多个文本项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20080291/