Button in front of div - css

Question

I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:
<div id="avatar">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
<p>Text</p>
</div>
I want the input to be displayed over the image, also, the text need to be at the right. I tried using:
img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}
But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.
What is the best way to do this?
Obs.: The space where the button is, needs to be empty, or else, the text will move up.
This is how it's displayed on chrome:
This is how it's displayed on firefox:

Answer 1

You need to specify the x and y positions on an absolute position. Change the css for input to this:
input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}

Answer 2

There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.
Use a main DIV to contain everything and give it the position:relative property.
Place the img and input tags in a single DIV and assign this DIV the float:left property.
Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.
Here's an example:
<div id="avatar-container">
<div id="avatar-image-btn">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
</div>
<p>Text</p>
</div>
<style>
#avatar-container { position: relative; }
#avatar-container p { float: left; }
#avatar-image-btn { float: left; }
#avatar-image-btn img { }
#avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>
See, clean and simple, works every time and is multi-browser compatible.
*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.

Answer 3

use z-index
input { position: absolute; margin:140px 0px 0px 130px; z-index:2}
this is pushing your button one layer up
after understanding the question correctly here is a solution
img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}
as mentioned bellow in comments the problem was in positioning

Answer 4

You may add position:relative for #avatar and give #btnAvatar top:0; left:0;

Answer 5

This should do it: http://jsfiddle.net/a6tA7/9/
I would recommend you use top: and left: to position the input element rather than margin: