float object over an image using CSS?_问答_开发者

开发者 https://www.devze.com 2023-01-28 09:43 出处：网络

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 funct

相关专题：css css-float

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?

When you float an obj开发者_开发知识库ect 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.

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:relative acts 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.

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.

If that is not sufficient for your needs, check out http://w3schools.com/css/css_positioning.asp

Try z-index property

<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>