Question

在Angular项目中，我尝试在给定的div上设置加载覆盖。我不想将这个叠加层放在我的整个页面上（我猜想会更容易）。

这是我迄今取得的成就Fiddle（

#loader-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
}

如您所见，我的div有一个红色边框可以清楚地看到它。我的#loader-wrapper未涵盖整个div区域。

我希望将其扩展到整个div并使加载程序垂直和水平居中。

我试图将它放在顶部但没有成功。

作为奖励，如果加载器大小可能是相对的，它可以避免将来出现一些问题我想如果我的div包含很少的文本......但我对如何实现它没有任何想法。< / p>

Answer 1

您需要将其设置为position: absolute;才能使top和left生效。这将脱离背景。绝对定位元素的top和left以及right和bottom属性与其设置position: relative的最近元素相关。如果没有position: relative;的元素，它将一直向<body>。

我也更改了装载机的margin，因为它没有居中。

＆＃13;

.container {
    position: relative;
}
#loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-6" style="border: 1px solid red;">
      <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit dolor.</p>

       <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla, eget maximus nisi molestie eget.</p>
        <div id="loader-wrapper">
          <div id="loader"></div>
        </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要在父级position:relative）中添加.col-md-6，在子级absolute中添加#loader-wrapper

＆＃13;

.col-md-6 {
  position: relative;
  border: red solid 1px;
}
#loader-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
}
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate
        eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit
        dolor.
      </p>

      <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla,
        eget maximus nisi molestie eget.</p>
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

有一个答案：

添加＆＃34;职位：亲属＆＃34;到了父母和＆＃34;职位：绝对＆＃34;到元素。

.parent {
  position: relative;
}

#loader-wrapper {
   position: absolute;
}

https://jsfiddle.net/sh4k10rp/8/

加载器覆盖单个div

3 个答案: