使用CSS在图像上浮动对象？

Question

是否可以使用css将对象浮动到图像上？我想在图像上放置一个表单(不是背景).Float不起作用,但是有一些变量可以提供这个功能吗？

浮动对象时,它会将文本推送到对象的任一侧.我正在寻找的东西是不会做到这一点的,只会漂浮而不考虑它下面的东西.

Answer 1

您正在寻找的不是浮动元素所做的.浮动元素仍然是文档流的一部分,并且您想要一个不是的元素.

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

<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充当其中绝对定位元素的原点,因此文本放置在图像的顶部而不是页面的左上角.