Наложение div в css

Question

Я хотел бы реализовать спиннер процесса для моего приложения во время процесса вызова покоя.Моя проблема сейчас в том, что я хотел бы наложить div на другой, содержащий вращатель, но я просто не знаю как.Я попробовал это с z-index, но это не работает.Кто-нибудь знает, как решить эту проблему?

Вот пример стекаблика: https://stackblitz.com/edit/angular-x6qtbp-qgvkx1

Answer 1

Вы имеете в виду полный загрузчик страниц, как это

 <div class="loader">
      <div class="spinner"></div>
    </div>

`

.loader {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(255,255,255,0.5);
}
.spinner {
  width:60px;
  height:60px;
  border-radius: 60px;
  border: 10px solid teal;
  position: fixed;
  left: calc( 50% - 30px);
  top: calc( 50% - 30px);
  animation-name: spin;
  animation-duration: 1s;
  border-left-color: transparent;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Answer 2

z-index как раз накапливается (где div отображается сверху или снизу и т. Д.).чтобы наложить div, вы должны обязательно использовать свойства позиционирования (position, top, left, right и др.).из предоставленного URL я не могу понять, какие div вы хотите наложить.