How to position one element top of another in css - html

Question

I am trying to make a login form. So far I have managed to hardcode it but once I need to for ex. move one of the wrappers then I got to change every element position in that wrapper. How can I do it so that when moving icon, BG field and text, I only got to change position from one place?
HTML code:
<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 code:
#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;
}
The whole thing should look like this (but should be editable/positioned with an ease):
Thank You!

Answer 1

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

Answer 2

Okey, I managed to fix it myself.
Instead of width in the wrapper, I had to use left.
For ex.
#user-wrapper {
position:relative;
top:100px;
left:0px;
}
Now I can just only change wrapper parameters top/left and it moves all items inside the wrapper div.