CSS - position button inside image

Question

I have a div containing an image, I need to put a button inside the image around the upper right corner of the image when I do this

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

What this does is to place the image of the button somewhere else, it moves the image left and right, but now the button has the ability to click in the bar, from where it was originally placed in the far right corner of the div. When i try this

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

it moves the button to the right, but does not move it down.

Note: the button is inside the div, without css it is placed on top of the image in the center.

Answer 1

You must provide a div containing the image a position:relative and your button contained in that div a position:absolute . This will position the button relative to the div container.

Answer 2

Unless you have a specific reason to use the img tag for this, I would use a div structure like this:

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

To get the correct button position, you will want to set the div position to “relative” and the button position to “absolute”. This means that the absolute position of the button will be based on the upper left corner of the wrapper div.

An example of this css would be:

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

The above CSS will put your button in the upper right corner with 5px of space between it and the corner of the div.

Answer 3

Take a look at this example below: the image with the previous and next buttons above it.

  <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 ============================================ p>

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

JScript ======================== Ask and I will discuss how you work with the next and previous thing. Despite the fact that this is a working example.