为什么用CSS在绝对定位图像后面显示文本？

使用此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中进行测试。

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

请参阅此

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

<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>

这是一些文字，画在页面的图像之后，为什么画在图像后面？

回答可能有点太晚了，但可能对某些人有用：

---

解决方法是设置

z-index:-1到图像。可能应该将文本包装在
中。本文可以回答您的问题：

TL；DR:定位元素堆叠在非定位元素之上，因此只需将
position:relative
添加到要堆叠在顶部的文本中即可



这是一些文本
我知道这并不意味着幽默，但这个答案让我兴奋不已+1虽然这也让我微笑，但不幸的是，这一点都没有帮助。