将div放在另一个绝对div下

时间：2016-09-30 19:45:53

标签： html css

这是一个用于加载屏幕的代码段。

我想在加载器动画下面放置文本，例如：正在加载。

我无法在.loader1 div下正确放置/订购div。

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222222;
  z-index: 1000;
}
.loader1 {
  z-index: 1001;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #DAC500;
  border-right: 16px solid #4A6FB1;
  border-bottom: 16px solid #DAC500;
  border-left: 16px solid #4A6FB1;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="loader">
  <div class="loader1"></div>
</div>

就是这样。提前谢谢。

5 个答案:

答案 0 :(得分：0)

喜欢这个？ 

<!DOCTYPE html>
<html>
<head>
<style>

.loader {
    position: absolute;
    color:white;
    text-align:center;
    width: 100%;
    height: 100%;
    background: #222222;
    z-index: 1000;
}
.loader1 {
  z-index: 1001;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #DAC500;
  border-right: 16px solid #4A6FB1;
  border-bottom: 16px solid #DAC500;
  border-left: 16px solid #4A6FB1;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
position:fixed;
display:block;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader">
LOADING ...
<div class="loader1"> </div>
</div>
</body>
</html>

答案 1 :(得分：0)

添加了一些CSS ro你的加载器div并将它放在加载器下。这会是你正在寻找的吗？

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <style>
    .loader {
      position: absolute;
      color: #fff;
      text-align: center;
      width: 100px;
      height: 20px;
      line-height:20px;
      padding: 5px 10px;
      top: 200px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background: #222222;
      z-index: 1000;
    }
    .loader1 {
      z-index: 1001;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #DAC500;
      border-right: 16px solid #4A6FB1;
      border-bottom: 16px solid #DAC500;
      border-left: 16px solid #4A6FB1;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      position: fixed;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="loader">
    <div class="loader1"></div>
    Loading</div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

也许你可以这样做：

演示：CodePen

＆＃13;
＆＃13; 
.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222222;
  z-index: 1000;
}

.loader1, .loading {
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.loading {
  z-index: 1002;
  width: 90px;
  height: 20px;
  color: #fff;
}

.loading p {
  margin-top: 100px;
}

.loader1 {
  z-index: 1001;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #DAC500;
  border-right: 16px solid #4A6FB1;
  border-bottom: 16px solid #DAC500;
  border-left: 16px solid #4A6FB1;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
＆＃13; 
<div class="loader">
  <div class="loader1"></div>
  <div class="loading"><p>LOADING...</p></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我们将不得不采取一些假设。

圆圈的宽度和高度现在是固定的。然后我们使用包含文本加载的div的绝对位置。使用 margin-left，margin-top，left，top ，我们可以播放并找到适合我们的内容。

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222222;
  z-index: 1000;
}
.loader1 {
  z-index: 1001;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #DAC500;
  border-right: 16px solid #4A6FB1;
  border-bottom: 16px solid #DAC500;
  border-left: 16px solid #4A6FB1;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-text{
  position:absolute;
  top:50%;
  left:50%;
  color:#fff;
  margin-top:-15px;
  margin-left:-30px;
}
<div class="loader">
  <div class="loader1"></div>
  <div class="loader-text">Loading</div>
</div>

答案 4 :(得分：0)

我会改变你完全这样做的方式，然后像这样使用flexbox。

它将根据微调器和文本计算出一个中间位置，而不是将微调器放在中间，而是放在它下面的文本中。

＆＃13;
＆＃13; 
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.load {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(34, 34, 34, 1);
  z-index: 999;
}
.load-spinner {
  border-radius: 50%;
  border: 16px solid;
  border-color: #DAC500 #4A6FB1;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.load-text {
  text-align: center;
  font-variant: small-caps;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding-top: 10px;
}
@keyframes spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}
＆＃13; 
<div class="load">
  <div class="load-group">
    <div class="load-spinner"></div>
    <div class="load-text">Loading...</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题