CSS - position button inside image

Question

I have div that contains an image, I need to place a button inside the image to around the top right corner of the image, when I do this

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

What this is doing is making the button image be placed somewhere else, it moves the image left to the right and down, but the now the button is click-able in bar from where it was originally placed to the far right 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 it won't move it down.

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

Answer 1

You should give the div containing the image a position:relative and your button that is contained within that div a position:absolute. That will position the button relative to the container div.

Answer 2

If you don't have an specific reason to be using an img tag for this I would use a div structure like this:

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

To get the button to position correctly you are going to want to set the div position to "relative" and the button position to "absolute". This means the absolute position of the button will be based on the top left of the wrapping 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 top right with 5px of space between it and the corner of the div.

Answer 3

Take a look this example below: an image with previous and next button over 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===========================================

<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 be discussed how you work with the next and previous thing.despite that this is a working example.