Question

我希望为我的应用程序实现一个进程微调器，并进行一个休息调用过程。我现在的问题是，我想将div与另一个包含微调器的div重叠，但我只是不知道如何。我用z-index尝试了它，但它不起作用。有人知道如何解决这个问题吗？

这是一个stackblitz示例：https://stackblitz.com/edit/angular-x6qtbp-qgvkx1

Answer 1

z-index只是叠加（div出现在顶部或下面，等等）。要叠加div，你绝对应该使用定位属性（位置，顶部，左，右等）。从提供的网址中，我无法确定您要覆盖的div。

Answer 2

你的意思是像这样的整页加载器

 <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);
  }
}

在css中叠加div

2 个答案: