使用 CSS 在图像上浮动对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4317474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
float object over an image using CSS?
提问by user494216
Is it possible to float an object over an image using css? I want to place a form over an image (that isn't a background). Float doesn't work, but is there some variable that does provide this function?
是否可以使用css将对象浮动在图像上？我想在图像上放置一个表单（不是背景）。Float 不起作用，但是否有一些变量确实提供了这个功能？
When you float an object it pushes the text to either side of the object. What I am looking for is something that will not do this, that will just float without regard to what is underneath it.
当您浮动对象时，它会将文本推送到对象的任一侧。我正在寻找的是不会这样做的东西，它只会漂浮而不管它下面是什么。
回答by Guffa
What you are looking for is not what floating elements do. A floating element is still part of the document flow, and you want an element that isn't.
您正在寻找的不是浮动元素的作用。浮动元素仍然是文档流的一部分，而您想要一个不是的元素。
Use absolute positioning to take an element out of the document flow, that way it won't push other elements away and you can place it on top of other elements:
使用绝对定位从文档流中取出一个元素，这样它就不会将其他元素推开，您可以将它放在其他元素的顶部：
<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>
The elements with position:relativeacts as the origin for the absolutely positioned elements inside it, so that the text is placed on top of the image and not at the top left corner of the page.
元素position:relative作为其中绝对定位元素的原点，因此文本被放置在图像的顶部而不是页面的左上角。
回答by DwB
If you make the image in question the background image for the div or (yes, I'm saying it) table used to format the form, then the form will "float" over the image.
如果您将有问题的图像作为用于格式化表单的 div 或（是的，我说的是）表格的背景图像，则表单将“浮动”在图像上。
If that is not sufficient for your needs, check out http://w3schools.com/css/css_positioning.asp
如果这不足以满足您的需求，请查看http://w3schools.com/css/css_positioning.asp
回答by yvoyer
Try z-indexproperty
尝试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>
