CSS - pulsante di posizione all'interno dell'immagine

Question

ho div che contiene un'immagine, ho bisogno di inserire un pulsante all'interno dell'immagine a dietro l'angolo in alto a destra dell'immagine, quando faccio questo

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

cosa si tratta fare sta facendo posizionare l'immagine del pulsante da qualche altra parte, sposta l'immagine verso sinistra e verso il basso, ma ora il pulsante è cliccabile nella barra da dove era originariamente posizionato all'estrema destra del div. Quando provo questo

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

sposta il pulsante a destra ma non lo sposta verso il basso.

Nota: il pulsante è all'interno del div, senza il CSS si è posto sulla parte superiore dell'immagine nel centro

Answer 1

Si dovrebbe dare il div contenente l'immagine di un position:relative e il pulsante che è contenuto all'interno di tale div a position:absolute. Questo posizionerà il pulsante relativo al contenitore div.

Answer 2

Se non si dispone di una ragione specifica per essere utilizzando un tag img per questo vorrei usare una struttura div come questo:

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

Per ottenere il pulsante per posizionare correttamente si sta andando a voler imposta la posizione div su "relativo" e la posizione del pulsante su "absolute". Ciò significa che la posizione assoluta del pulsante sarà basata sulla parte in alto a sinistra del div wrapping.

Un esempio di questo css sarebbe:

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

È possibile che questo CSS metterà il pulsante in alto a destra con 5px di spazio tra essa e l'angolo della div.

Answer 3

Dai uno sguardo al seguente esempio: un'immagine con il pulsante precedente e successivo su di esso.

<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 ======================= chiedere e sarò essere discusso come si lavora con la prossima cosa e precedenti . Nonostante questo sia un esempio funzionante.