Html 将背景图像置于div上方

我有一个类，它将加载图像作为背景图像：

.loader {
  background-image: url('loader.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

现在，该类在一个div中使用，该div还包含我的HTML元素的其余部分：

乙二醇

...
具有多个输入的窗体的代码或任何其他随机代码
...

现在，当应用该类时，图像位于输入框和其他元素的下方。但是，我的意图是向用户显示一个位于表单顶部的加载器，该表单具有较低的不透明度，表示正在获取表单数据

---

那么，我怎样才能在其他元素上获得图像呢？TIA

无法将背景图像置于内容上方。在这种情况下，或者选择器可以帮助您

我个人会使用另一个div，在内容上方加载图像，并带有

position:absolute

。像这样：

.loader img{
位置：绝对位置；
排名：0；
宽度：30%；
高度：50px；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Big_%26_Small_Pumkins.JPG/1024px-大(26)小(Pumkins.JPG),；
}

...
具有多个输入的窗体的代码或任何其他随机代码
...

无法将背景图像置于内容上方。在这种情况下，或者选择器可以帮助您

我个人会使用另一个div，在内容上方加载图像，并带有

position:absolute

。像这样：

.loader img{
位置：绝对位置；
排名：0；
宽度：30%；
高度：50px；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Big_%26_Small_Pumkins.JPG/1024px-大(26)小(Pumkins.JPG),；
}

...
具有多个输入的窗体的代码或任何其他随机代码
...

就像这样；除了在你的例子中，用你在loader div上的图像替换css:after作为背景

@关键帧旋转{到{变换：旋转（360度）；}
部分{
位置：相对位置；
保证金：1rem；
填充：1rem；
边框：灰色3px实心；
}
.加载器{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgba（0,0,0,7）；
边框：红色1px实心；
}
加载器：之后{
内容：''；
位置：绝对位置；
高度：3雷姆；
宽度：3rem；
边框：5px纯银；
边框顶部：红色5px实心；
边界半径：50%；
动画：旋转1s线性无限；
}

测试
废话废话废话废话废话

就像这样；除了在你的例子中，用你在loader div上的图像替换css:after作为背景

@关键帧旋转{到{变换：旋转（360度）；}
部分{
位置：相对位置；
保证金：1rem；
填充：1rem；
边框：灰色3px实心；
}
.加载器{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgba（0,0,0,7）；
边框：红色1px实心；
}
加载器：之后{
内容：''；
位置：绝对位置；
高度：3雷姆；
宽度：3rem；
边框：5px纯银；
边框顶部：红色5px实心；
边界半径：50%；
动画：旋转1s线性无限；
}

测试
废话废话废话废话废话

将其放在一个单独的div上，该div顶部显示一个更高的z索引，作为覆盖层，而不是容器本身。您是否建议这样做？把它放在一个单独的div上，上面有一个更高的z索引，作为覆盖层，而不是容器本身。你是在建议这样做吗？位置相对属性扮演什么角色？这似乎是一个相当重要的问题。@RohanAgarwal在本例中，它是绝对儿童的相对容器。因此，它在元素中创建绝对子元素所引用的边界，而不是默认情况下位置静态的DOM。你可以在网上了解更多信息。欢呼职位相对属性扮演什么角色？这似乎是一个相当重要的问题。@RohanAgarwal在本例中，它是绝对儿童的相对容器。因此，它在元素中创建绝对子元素所引用的边界，而不是默认情况下位置静态的DOM。你可以在网上了解更多信息。干杯

<div class="lodaer"> 
...
 code for a form with many inputs or any other random code
...
</div>