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

Answer 2

如果您将图像作为div的背景图像或（是的，我说的）用于格式化表单的表格，那么表单将“漂浮”在图像上。

如果这不足以满足您的需求，请查看http://w3schools.com/css/css_positioning.asp

Answer 3

尝试z-index属性

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

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

3 个答案: