¿Cómo puedo poner un div sobre una imagen?

Estoy tratando de poner un div sobre una imagen para que actúe como un título, directamente en la parte superior de la imagen.¿Cómo puedo poner un div sobre una imagen?

A veces la leyenda es más larga que otras veces, por lo que no puedo establecer un margen de margen específico: -px porque a veces la altura de la leyenda es más larga.

He intentado esto y el fondo del enlace (negro) no muestra, también como acabo de decir, la altura del subtítulo cambia lo que este método es basura:

<div> 

    <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;"> 
    <a href="LINK" ><div style="width:210px;background-color:black;color:white;bottom:0;margin-top:-20px;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a> 

</div>

Fuente

2012-10-01 Rusty Schmidt

¿Por qué no usas 'background-image'? –

Intente algo de esta manera:

<div style="position:relative;"> 

    <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;"> 
    <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div> 

</div>

Tuviste algunas cosas en juego:
1) Tenías un div dentro de una etiqueta 'a'. No debe colocar elementos de nivel de bloque (como divs) dentro de elementos de nivel en línea (como a's).
2) Retire el flotador de la imagen, establezca la posición div externa en relativa y la posición div interna en absoluta, luego colóquelo en la parte superior del div que lo contiene. A partir de ahí, agregue un índice z mayor que 0 al div interno para una buena medida, para asegurarse de que quede apilado encima de la imagen.

Fuente

2012-10-01 19:48:15 Mike

¡Esto funciona genial! Para el registro de otras publicaciones, en caso de que otro usuario tenga el mismo problema, simplemente cambié la parte superior: 0 al final: 0 y ¡hace lo que necesitaba! ¡Muchas gracias! –

Esto funcionó en su mayoría. Sin embargo, tuve que agregar 'display: inline-block' al div externo en mi caso. –

Uso propiedad CSS z-index para alinee el texto sobre la imagen. El elemento con mayor índice z aparece en la parte superior.

Fuente

2012-10-01 19:44:31

Este código debe trabajar por lo que estamos tratando de hacer:

<div style="background: transparent url('<? echo $image_url ?>') no-repeat 0 0; padding: 10px 0 10px 10px; width: 200px;"><a href="LINK"><? echo $title ?></a></div>

Fuente

2012-10-01 19:45:36 ews2001

Añadir a position:absolute; left:0px;top:0px;z-index: 2; div actual, y añadir style="position:relative;" en el div padre

<div style="position:relative;"> 

    <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;"> 

<a href="LINK" ><div style="position:absolute;z-index: 2;left:0px;top:0px;width:210px;background-color:black;color:white;bottom:0;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

Fuente

2012-10-01 19:46:36

Esta parece ser la dirección correcta, ¿cómo podría hacer que el enlace div vaya hacia abajo en lugar de hacia arriba: lo intenté abajo: 0px; en lugar de arriba: 0px –

depende del tamaño de la imagen, si la altura de la imagen es más grande que la altura de la división inferior: 0px; debería funcionar. –

¿Cómo puedo poner un div sobre una imagen?

Respuesta

Cuestiones relacionadas