如何在css中将一个元素置于另一个元素的顶部

Question

我正在尝试创建一个登录表单。到目前为止，我已设法对其进行硬编码，但一旦我需要为ex。移动其中一个包装器然后我必须更改该包装器中的每个元素位置。我怎么能这样做，以便在移动图标，BG字段和文本时，我只能从一个地方改变位置？

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代码：

    #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中。