如何在CSS中定位另一個元素的頂部

Question

我正在嘗試創建登錄表單。到目前爲止，我已經設法對它進行硬編碼，但是一旦我需要去除前綴。移動其中一個包裝器，然後我需要更改該包裝器中的每個元素位置。我該怎麼做，以便在移動圖標，BG字段和文本時，我只能從一個地方改變位置？

HTML代碼：

<div id="user-wrapper"> 
     <img id="userfield" src="images/fieldBG.png" alt="Username"> 
     <img id="usericon" src="images/userIcon.png" alt="Username"> 
     <p id="username"> 
      Username 
     </p> 
    </div> 

    <div id="pw-wrapper"> 
     <img id="pwfield" src="images/fieldBG.png" alt="Password"> 
     <img id="pwicon" src="images/pwIcon.png" alt="Password"> 
     <p id="pw"> 
      Password 
     </p> 
    </div> 

    <div id="login-wrapper"> 
     <img id="loginbtn" src="images/loginBtn.png" alt="Login"> 
     <p><a id="login" href="#"> 
      Login 
     </p> 
    </div> 

CSS代碼：

#user-wrapper { 
     position: relative; 
     top: 100px; 
     width:1760px; 
    } 

    #usericon { 
     position: absolute; 
     top: 10px; 
     left: 740px; 
    } 

    #user-wrapper p { 
     position: absolute; 
     top: 14px; 
     left: 840px; 
    } 

    #pw-wrapper { 
     position: relative; 
     top: 120px; 
     width:1760px; 
    } 

    #pwicon { 
     position: absolute; 
     top: 10px; 
     left: 740px; 
    } 

    #pw-wrapper p { 
     position: absolute; 
     top: 14px; 
     left: 840px; 
    } 

    #login-wrapper { 
     position: relative; 
     top: 140px; 
     width: 1940px; 
    } 

    #login-wrapper p { 
     position: absolute; 
     top: 12px; 
     left: 950px; 
    } 

整個事情應該是這樣的（但應該爲可編輯/定位的方便）：

謝謝！

Answer 1

僅使用

#usericon { 
    position: absolute; 
    top: 10px; 
float: right; 
    left: 740px; 

} 

Answer 2

歐凱，我設法解決它自己。

而不是在包裝的寬度，我不得不使用左邊。

例如，

#user-wrapper { 
     position:relative; 
     top:100px; 
     left:0px; 
} 

現在我只能更改包裝參數頂部/左邊，它移動包裝div內的所有項目。