CSS - botón de posición de la imagen

Question

dentro tengo div que contiene una imagen, necesito colocar un botón dentro de la imagen a la vuelta de la esquina superior derecha de la imagen, cuando hago esto

#button_id{ 
position: relative; 
    left: 270px; 
    top: 30px; 
} 

Lo que esto es hacer está haciendo que la imagen del botón se coloque en otro lugar, mueve la imagen hacia la derecha y hacia abajo, pero ahora el botón puede hacer clic en la barra desde donde se colocó originalmente a la extrema derecha del div. Cuando intento esto

#button_id{ 
    position: relative; 
    float: right; padding: 0px -40px -15px; 
} 

mueve el botón hacia la derecha pero no lo moverá hacia abajo.

Nota: el botón está dentro del div, sin el css que se coloca en la parte superior de la imagen en el centro

Answer 1

Debe dar el div que contiene la imagen de un position:relative y el botón que está contenido dentro de ese div a position:absolute. Eso posicionará el botón relativo al contenedor div.

Answer 2

Si usted no tiene una razón específica para ser el uso de una etiqueta img de este me gustaría utilizar una estructura div así:

<div id="my_image"> 
<button id="button_id" /> 
</div> 

Para obtener el botón para colocar correctamente vas a querer establezca la posición div en "relativa" y la posición del botón en "absoluta". Esto significa que la posición absoluta del botón se basará en la parte superior izquierda del div de envoltura.

Un ejemplo de esto sería css:

#my_image { position: relative; } 
#button_id { position: absolute; right: 5px; top: 5px; } 

El CSS anterior pondrá su botón en la parte superior derecha con 5px de espacio entre él y la esquina de la div.

Answer 3

Eche un vistazo a este ejemplo a continuación: una imagen con el botón anterior y el siguiente sobre ella.

<div class="thumbnail rec thmbnail-large"> 
    <img class="img-thumbnail img-thumbnail-large-0 img-responsive" src="http://daniel-ethiopia.rhcloud.com/nivo/2.jpg" data-holder-rendered="true" width="100%" style="margin-left:0px;height:auto;"> 
    <input type ="button" class="classic_button_next btn btn-primary btn-large" id="next_button" value="Next >>"/> 
    <input type ="button" class="classic_button_prev btn btn-primary btn-large" id="prev_button" value="Previous <<"/>    
</div> 

CSS ======================================== ===

<style type="text/css"> 
.classic_button_next{ position: absolute; right: 5px; top: 5px; } 
.classic_button_prev { position: absolute; right: 88px; top: 5px; } 
<style> 

JScript ======================= Pide y i se discutirá cómo se trabaja con el anterior y siguiente cosa . a pesar de que este es un ejemplo de trabajo.