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.