为啥使用 CSS 显示在绝对定位图像后面的文本？

Posted 2023-03-06

【中文标题】为啥使用 CSS 显示在绝对定位图像后面的文本？

【英文标题】：Why is text displayed behind absolute positioned image with CSS?为什么使用 CSS 显示在绝对定位图像后面的文本？

【发布时间】：2013-09-05 10:28:31

【问题描述】：

使用这个 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 中测试。

【参考方案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>

【参考方案2】：

参考这个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>

【参考方案3】：

这是因为你将图片的位置设置为绝对位置。

【讨论】：

我知道这并不意味着幽默，但这个答案让我崩溃了。 +1

虽然这也让我笑了，但不幸的是，它根本没有帮助。

【参考方案4】：

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