css - 使用 CSS 在图像上 float 对象？

Question

是否可以使用 css 将对象 float 在图像上？我想在图像(不是背景)上放置一个表格。 Float 不起作用，但是否有一些变量可以提供此功能？

当您 float 对象时，它会将文本推到对象的任一侧。我正在寻找的是不会这样做的东西，它会漂浮而不管它下面是什么。

Answer 1

您要查找的不是 float 元素的作用。 float 元素仍然是文档流的一部分，而您想要一个不是的元素。

使用绝对定位将元素从文档流中取出，这样它就不会将其他元素推开，您可以将它放在其他元素之上:

<div style="position:relative">    
  <img src="image.jpg" alt="" />
  <div style="position:absolute;left:0;top:0;">
    This text is on top of the image
  </div>
</div>

带有 position:relative 的元素充当其中绝对定位元素的原点，因此文本位于图像的顶部而不是页面的左上角。