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;}

Answer 2

执行此代码有一种简单而干净的方法。诀窍是使用DIV标记来包含和定位所有内容。

1. 使用主DIV包含所有内容并赋予其位置：relative property。
2. 将img和输入标签放在一个DIV中，并为此DIV指定float：left属性。
3. 使用CSS选择P标签并将其浮动到左侧。这将把文本放在包含img和输入的DIV旁边。
4. 现在为输入标签分配position：absolute属性，同时使用属性TOP＆amp;左边把它放到位。

以下是一个例子：

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

看，干净简单，每次都有效，并且兼容多浏览器。

*保证金属性在使用时可能会造成混乱而不小心。最佳做法是使用它来堆叠div中的标签，而不是用于具有大间隙边距的定位。

Answer 3

使用z-index

input { position: absolute; margin:140px 0px 0px 130px; z-index:2}

这会将你的按钮向上推一层

正确理解问题后，这是一个解决方案

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

如评论中所述，问题在于定位

Answer 4

您可以为#avatar添加position:relative并提供#btnAvatar top:0; left:0;

Answer 5

这应该这样做：http://jsfiddle.net/a6tA7/9/

我建议您使用top:和left:来定位输入元素，而不是margin: