html - 在此代码示例中将一个 div 置于另一个 div 之下

Question

<分区>

Answer 1

试试这个:https://codepen.io/Lansana/pen/ezvVYR

HTML:

<div class="spinner-wrapper">
    <div class='spinner'>
                <div class='quadrant'></div>
                <div class='quadrant'></div>
                <div class='quadrant'></div>
                <div class='quadrant'></div>
    </div>
    <div class='text'>test</div>
</div>

CSS:

html,
body {
  height: 90%;
}

body {
  background: #c2c2c2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
    background: yellow;
    text-align: center;
}

.spinner-wrapper {
    width: auto;
    height: auto;
    position: relative;
}

.spinner {
  width: 300px;
  height: 300px;
    min-width: 300px;
  position: relative;
  animation: spin 60s linear infinite;
  //border-radius: 300px;

.quadrant {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    //z-index: 10;
        mix-blend-mode: multiply;
    //opacity: .5;
    &:after {
      content: "";
      color: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    &:nth-child(1) {
      animation: slide_horiz_neg 12s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: cyan;
      }
    }
    &:nth-child(2) {
      animation: slide_vert_neg 8s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: yellow;
      }
    }
    &:nth-child(3) {
      animation: slide_horiz_pos 10s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: magenta;
      }
    }
   /* &:nth-child(4) {
     // animation: slide_vert_pos 3.5s linear alternate infinite;
      &:after {
        mix-blend-mode: normal;
        //opacity: .5;
        background: #000000;
      }
    } */
  }
}

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

@keyframes slide_vert_pos {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(1%);
  }
}

@keyframes slide_vert_neg {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-1%);
  }
}

@keyframes slide_horiz_pos {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(1%);
  }
}

@keyframes slide_horiz_neg {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-1%);
  }
}

我创建了一个包装器，其中包含您的微调器和文本。

包装器有一个自动高度/宽度，基于它的子元素。

文本可以在该包装器中以任何您想要的方式定位，并且它完全不受微调器的影响，除了两者在 dom 中的放置顺序。