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使form元素显示在加载器下方

#login_form {
  z-index: -1;
}

或使loader元素成为最顶层的元素

 #loader {
  z-index: 999;
}

Answer 2

请仔细检查它，将其向下移动时，它将在表单中心显示加载程序。

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

当加载程序位于表单上方时，表单位置会发生变化

2 个答案: