css - div 前面的按钮

Question

我不是 CSS 专家。我正在尝试放置一个 <input type="button">在 <img> 的中心我在这样做时遇到了一些麻烦。 Here's a fiddle这是我的 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>

我希望输入显示在图像上，而且文本需要在右侧。我尝试使用:

img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}

但它只适用于 chrome/safari，在其他浏览器上，按钮放在图像后面而不是前面。

做这个的最好方式是什么？

Obs.:按钮所在的空间，需要为空，否则文字会向上移动。

这是它在 chrome 上的显示方式:



这是它在 Firefox 上的显示方式:

Answer 1

您需要在绝对位置上指定 x 和 y 位置。将输入的 css 更改为:

input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}