<Div> sobre <img>

[TomasCrespo]

Hola chicos, necestio poner un div sobre un elemento img (una imagen)

He buscado en el foro y todo lo que he encontrado es poner la imagen como fondo del div = eso no me sirve
Otros me hablan sobre postion: absulte y especificar el top y el left = tampoco me sirve

Sin entrar en detalles de por qué esas dos soluciones no me sirven ¿conoceis otra?
¿Se podría hacer algo con los atributos position: relative? No domino esos atributos. Supongo que con el float no es.

Sería algo así como escribir encima de una imagen, y punto. Nada de.. "cuando pase por encima..." ni nada de eso. Un texto sobre una imagen.

¿Qué se os ocurre?

Gracias

[Raulmmmm]

Pues:

Código HTML:

<div style="width: 350px; height: 500px; background: url('imagen.jpg');">
Tu texto</div> 

Saludos

PD: Se me olvidaba, pon en width los píxeles de ancho de tu imagen y en el height los píxeles de alto.

[TomasCrespo]

Se te ha pasado un pequeño detalle

He buscado en el foro y todo lo que he encontrado es poner la imagen como fondo del div = eso no me sirve
Otros me hablan sobre postion: absulte y especificar el top y el left = tampoco me sirve

[Raulmmmm]

Lo siento... no sé más soluciones...

[TomasCrespo]

Yo he encontrado esta:

Código HTML:

<div id="cont"><img src="fotos/sinfoto.jpg" width="200" height="168" />
	<span id="ref">REF. 0330</span>
</div> 

Si a cont le ponemos position:relative; width:200px;
y a ref le ponemos position:absolute; top:0px; left:0px; ref (que es el texto) se pondrá sobre la imgen (que es cont). Podemos ajustar la posicion del texto con respecto a la imagen jugando con los valores top y left de ref

OJO: La posicion absolute aquí no se calcula respecto a la pagina, sino respecto a su elemnto padre (cont), por lo que si cambiamos de sitio a cont, ref irá con él.

Mola

[Raulmmmm]

Siempre se aprende algo .

[metacortex]

Iniciado por TomasCrespo

Otros me hablan sobre postion: absulte y especificar el top y el left = tampoco me sirve

Iniciado por TomasCrespo

Si a cont le ponemos position:relative; width:200px;
y a ref le ponemos position:absolute; top:0px; left:0px; ref (que es el texto) se pondrá sobre la imgen (que es cont). Podemos ajustar la posicion del texto con respecto a la imagen jugando con los valores top y left de ref

OJO: La posicion absolute aquí no se calcula respecto a la pagina, sino respecto a su elemnto padre (cont), por lo que si cambiamos de sitio a cont, ref irá con él.

Mola

[juaniquillo]

dependiendo del caso yo uso posicionamiento absoluto o margin negativo. en tu caso no se ya que no has puesto tu html/css

[TomasCrespo]

El tema del posicionamiento absoluto, siempre o casi siempre que se comenta, se hace de acuerdo a la etiqueta body, es decir posicionamiento absoluto global. A mi este tipo de posicionamiento no me gusta porque en cuanto cambias algo en la pagina se te va todo al garete. Sin embargo desconocía que existía un posicionamiento absoluto con relación al elemento padre. Esto ya es otra cosa, porque si muevo el elemento padre, también se mueve el hijo.

Muchas gracias por vuestra cooperación chicos

Saludos