html - 当加载程序到达表单顶部时，表单位置正在改变

Question

问题是当提交表单时加载器出现在表单的顶部但是当加载器出现时整个表单的位置正在下降。装载机到来时表格位置正在下降。
是否有任何 css 解决方案可以使其正常工作？

<form id="login_form">
    <div class="loader-container" id="loader-container" style="display:none;">
        <img alt="loader" src="ring.gif" /> <span>Loading Please Wait..</span>
    </div>

    <input type="email" placeholder="Email" name="mail" id="email" />
    <input type="password" placeholder="Password" name="pasword" id="paswrd" />
    <button class="submit" onclick="login();" id='submit'>Sign In</button>
    </div>
</form>

<style>
#email,
#paswrd {
    font-size: 16px;
    width: 100%;
    border-bottom: 1px solid #dadfe3 !important;
    border-top: 0px !important;
    border-radius: 3px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    box-shadow: none;
    padding: 5px;
    padding-top: 20px;
    margin: 0px auto;
    display: block;
    margin-top: 15px;
}

 .submit {
    border-radius: 2px;
    padding: 11px 15%;
    color: #ffffff;
    border: 0px;
    margin: 0px auto;
    display: block;
    margin-top: 15% !important;
    background-color: #d71921;
    font-size: 16px;
    cursor: pointer;
}

#login_form {
    margin: 0px auto;
    display: block;
    padding-top: 1%;
    width: 70%;
}
</style>

Answer 1

在设置页面样式时，最好使用 css z-index 属性堆叠元素。 -1 使表单元素出现在加载器下方

#login_form {
  z-index: -1;
}

或者使加载器元素成为最顶层元素

 #loader {
  z-index: 999;
}