如何在html表单上覆盖div？

我想在用户提交搜索时显示动画加载图标

我正在寻找的事件顺序：

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

我面临的问题主要是css

• 首先，加载图标似乎位于表单元素后面
• 其次，我不能增加div（searchEngineForm）的大小，使其与表单大小相同
• 最后，我不能将div（searchEngineForm）宽度设置为100%。它超出了形式

这是我的密码：

HTML:

---

要将html元素设置在其他元素之上，可以将其Z索引设置为比周围元素更高的数字

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

.page{ z-index: -1 ;}

和装载机一样

.loader{ z-index: 1; }

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

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

---

谢谢你，这正是我想要的D

.loader{ z-index: 1; }

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