float object over an image using CSS?

Question

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

Answer 1

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.