¿Es posible hacer flotar un objeto sobre una imagen usando css? Quiero colocar un formulario sobre una imagen (que no es un fondo). Float no funciona, pero ¿hay alguna variable que proporcione esta función?¿flotar objeto sobre una imagen usando CSS?
Cuando flota un objeto, empuja el texto hacia cualquier lado del objeto. Lo que estoy buscando es algo que no hará esto, que flotará sin tener en cuenta lo que hay debajo.
Lo que se busca no es lo que hacen los elementos flotantes. Un elemento flotante sigue siendo parte del flujo de documentos, y desea un elemento que no lo es.
Uso posicionamiento absoluto para tomar un elemento del flujo de documentos, de esa manera no va a empujar a otros elementos de distancia y se puede colocar en la parte superior de otros elementos:
<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>
Los elementos con position:relative actos como el origen de los elementos absolutamente posicionados en su interior, de modo que el texto se coloca en la parte superior de la imagen y no en la esquina superior izquierda de la página.
Si convierte la imagen en cuestión en la imagen de fondo de la tabla div (sí, lo digo) utilizada para formatear el formulario, entonces la forma "flotará" sobre la imagen.
Si eso no es suficiente para sus necesidades, echa un vistazo a http://w3schools.com/css/css_positioning.asp
Trate z-index propiedad
<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>
No puedo hacer que sea un fondo porque es un mapa de imagen. Echaré un vistazo a ese sitio web, gracias por el enlace. – user494216
@OP Si se trata de un mapa de imagen, ¿no es necesario hacer clic en él? ¿Tener algo por encima será un inconveniente en ese sentido? – Orbling