Перенести фоновое изображение над div

Question

У меня есть класс, который имеет загружаемое изображение в качестве фонового изображения:

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

Теперь этот класс используется в div, который также содержит остальную часть моего HTML элемента:

например,

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

Теперь, когда этот класс применяется, изображение появляется под полями ввода и другими элементами. Однако я намерен показать пользователю загрузчик поверх формы с формой, имеющей более низкую непрозрачность, что указывает на выборку данных формы.

Итак, как я могу разместить изображение поверх другого элементы? TIA

Answer 1

Примерно так; За исключением вашего случая, замените css: after своим изображением на div загрузчика в качестве фона, как у вас это было.

@keyframes spin { to { transform: rotate(360deg); }}

section {
  position: relative;
  margin: 1rem;
  padding: 1rem;
  border: gray 3px solid;
}

.loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.7);
  border: red 1px solid;
}

.loader:after {
  content: '';
  position: absolute;
  height: 3rem;
  width: 3rem;
  border: silver 5px solid;
  border-top: red 5px solid;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

<main>

  <section>
    <h1>test</h1>
    <p>blah blah blah blah blah blah blah</p>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div class="loader"></div>
  </section>
  
  <section>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div class="loader"></div>
  </section>

</main>

Answer 2

Невозможно разместить background-image над содержимым. Возможно, в этом случае вам может помочь селектор "перед" или "после" .

Я бы лично использовал другой div с изображением загрузки над содержимым, с position: absolute. Как это:

.loader-img{
    position: absolute;
    top: 0;
    width: 30%;
    height: 50px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Big_%26_Small_Pumkins.JPG/1024px-Big_%26_Small_Pumkins.JPG);
}

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

  <div class="loader-img"></div>
</div>