div前面的按钮

Question

我不是CSS专家。我试图在<img>的中心放置一个<input type="button">，我在这样做时遇到了一些麻烦。 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 .:按钮所在的空间需要为空，否则文本将向上移动。}

---

这是它是如何显示在浏览器：

这是它是如何显示在Firefox：

Answer 1

您需要指定绝对坐标上的x和y位置位置。输入的CSS改成这样：

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

Answer 2

使用的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 3

您可以添加position:relative for #avatar and give #btnAvatar top:0; left:0;

Answer 4

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

我会建议你使用top:和left:到输入元素位置，而不是margin:

Answer 5

有一个简单的和干净的方法做这个代码。诀窍是使用DIV标签来包含和定位一切。

1. 使用一个主DIV来包含所有内容并给它定位：相对属性。
2. 将img和input标签放在一个DIV中，并将该DIV赋值为float：left属性。
3. 使用CSS选择P标签并将其浮动到左侧。这将把文本放在包含img和输入的DIV旁边。
4. 现在，使用属性TOP &将位置：绝对属性赋值给位置。

下面是一个例子：

<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中堆叠标签，而不是用于大间隔边距的定位。