如何将div覆盖在html表单上方？

问题描述

我想在用户提交搜索后显示一个动画加载图标。

我想要的事件顺序：

• 用户提交了搜索
• 使加载图标可见
• 完成搜索后，使加载图标不可见

我面临的问题主要是CSS。

• 首先，加载图标似乎在form元素后面。
• 第二，我无法将div（searchEngineForm）的大小增加到与表单相同的大小。
• 最后，我无法将div（searchEngineForm）宽度设置为100％。它超出了表单。

这是我的代码：

HTML：

<form action="setJobFields" method="POST">
   <div id="searchEngineForm" style="display: none;">
      <div class="loader">
      </div>
   </div>
   ...
</form>

CSS：

#searchEngineForm{
    position: absolute;
    /* width: 100%; */
}
.loader {
    
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

解决方法

要在其他元素上方设置html元素，可以将其Z-index设置为高于其周围的数字。

例如，假设您要在页面其余部分的前面显示加载符号。您可以将整个页面包含在一个div中，为方便起见，我们将其设为“ page”类，我们可以将其设置为：

.page{ z-index: -1 ;}

加载器为

.loader{ z-index: 1; }

然后，要将其放置在所需的位置，可以将位置设置为绝对位置，并使用顶部和左侧属性（例如

.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }