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中堆疊標籤，而不是用於大間隔邊距的定位。