Положение формы меняется, когда загрузчик появляется поверх формы

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

Пожалуйста, пройдите по нему, он покажет загрузчик в центре формы при его перемещении вниз.

#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%;position:relative;
}
div#loader-container {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);text-align:center;
}
div#loader-container span {
    display: block;
    text-align: center;
}

<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>

Answer 2

при стилизации вашей страницы будет лучше, если вы сложите свои элементы с помощью свойства css z-index.-1 заставляет элемент формы появляться под загрузчиком

#login_form {
  z-index: -1;
}

или делает элемент загрузчика самым верхним элементом

 #loader {
  z-index: 999;
}