前方有一个 div 前的按钮。

Question

我不是CSS专家。我试图将一个<input type="button">放置在一个<img>的中心位置，但是我遇到了一些问题。这里有一个JSFiddle，以下是我的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上工作，在其他浏览器上，按钮放置在图像后面而不是前面。最好的方法是什么？注意：按钮所在的空间需要为空，否则文本将向上移动。

这是在Chrome上的显示方式：

这是在Firefox上的显示方式：

- Evandro Silva

Answer 1

您需要在绝对定位中指定x和y位置。将input的css更改为以下内容：

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

- Brian McDonald

---

我明白了，所以我认为 Chrome/Safari 将 0 视为默认的顶部和左侧。谢谢。 - Evandro Silva

Answer 2

有一个简单而清晰的方法来实现这段代码。诀窍是使用DIV标记来包含和定位所有内容。

1. 使用一个主DIV来包含所有内容，并给它position:relative属性。
2. 将img和input标记放置在一个单独的DIV中，并将此DIV分配为float:left属性。
3. 使用CSS选择P标签，将其浮动到左侧。这将使文本位于包含img和input的DIV旁边。
4. 现在将input标记分配position:absolute属性，同时使用TOP和LEFT属性将其定位到正确位置。

以下是示例：

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

看起来，干净简洁，每次都有效，并且支持多种浏览器。

*如果不小心使用margin属性，可能会造成混乱。最佳实践是将其用于在div中堆叠标签，而不是用于具有大间隙边距的定位。

- Pais

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

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

- mr. Holiday

---

问题不在于输入的索引，而是按钮的位置。在Chrome上，它显示正确，但在Firefox上，它放置在图像之后。 - Evandro Silva

我已经找到了解决方案：)) 你的图片定位是相对的，因为你没有指定位置选项，而默认是相对的，这就是你面临的问题，以下是你的解决方案： img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute} input { position: absolute; margin:140px 0px 0px 130px;} - mr. Holiday

将图像设置为 position:absolute 会导致文本重叠/覆盖图像。我建议将其更改为 position:relative。 - Richard Hedges

Answer 4

您可以为 #avatar 添加 position:relative，并为 #btnAvatar 设置 top:0; left:0;

- Sergiy T.

Answer 5

这应该可以解决问题：http://jsfiddle.net/a6tA7/9/

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

- Richard Hedges