4

使用此 HTML，我无法弄清楚为什么文本显示在图像后面：

<div style="position: relative">
<img src="image_url_here" style="position:absolute; top: 10px; left: 10px;" />  
This is some text, drawn on the page after the image, why is it drawn behind the image?
</div>

?

在 Mac 和 PC 上的 Chrome 和 PC 上的 IE 中测试。

4

4 回答 4

8

这篇文章可以回答你的问题：z-index解释

TL;DR：定位元素堆叠在非定位元素上，因此只需添加 position: relative到要堆叠在顶部的文本。

<div style="position: relative">
    <img src="https://via.placeholder.com/150" style="position:absolute; left: 10px;" />  
    <span style="position:relative">This is some text</span>
</div>

于 2018-11-25T23:18:56.883 回答
3

请参阅此https://developer.mozilla.org/en-US/docs/Web/CSS/position

试试这个或根据您的要求设置

<div style="position: relative">
<img src="image_url_here" style="position:relative; top: 10px; left: 10px;" />  
This is some text, drawn on the page after the image, why is it drawn behind the image?
</div>
于 2013-09-02T10:42:47.317 回答
2

这是因为您将图像的位置设置为绝对位置。

于 2013-09-02T10:35:08.440 回答
2

回答可能为时已晚，但可能对某人有用：解决方案是设置z-index: -1;为图像。可能应该将文本换行在<p>.

于 2016-10-19T10:50:14.610 回答