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

Question

使用这个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和Mac上的Chrome中测试过PC上的PC和IE。

Answer 1

本文可以回答您的问题：z-index explained

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>

Answer 2

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

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

Answer 4

可能有点太迟了回答，但可能对某人有用： 解决方案是将z-index: -1;设置为图像。可能应该在<p>中包装文本。