Question

我已经有了这个布局，我需要div＃loadingpopup使其父对象（#jobs）具有100％的高度和100％的宽度，覆盖/忽略其同级对象（.job-listing），以便两者的内容通过div＃loadingpopup的半透明背景，仍然几乎看不到div.job-listing。如何实现？

到目前为止，我尝试将位置：绝对，宽度和高度设置为100％；顶部和左侧为0，用于#loadingpopup，但是它可以正常工作，当我只需要#jobs（父div）覆盖在#loadingpopup

时，它会覆盖整个视口

<div id="jobs">
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div id="loadingpopup" style="background-color:rgba(0,0,0,0.2)">
    <span><i class="fas fa-circle-notch fa-spin" style="margin-right: 16px"></i>Loading...</span>
  </div>
</div>

Answer 1

您可以通过绝对定位来实现：

#jobs {
  position: relative;
}

#loadingpopup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#loadingpopup span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="jobs">
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div id="loadingpopup" style="background-color:rgba(0,0,0,0.2)">
    <span><i class="fas fa-circle-notch fa-spin" style="margin-right: 16px"></i>Loading...</span>
  </div>
</div>

这里最棘手的部分是position: absolute;将作为第一个非静态父对象（除了position: static这是默认值以外）。这意味着您还需要将position: relative设置为#jobs。

完成后，我们可以将span内的#loadingpopup的宽度和高度设置为100％，并进行类似的绝对定位。这也可以通过使用align-items: flex-end;的flexbox来实现，但是在这种简单的情况下，我们可以使用前一个for better support。

您可能还想将高度增加孩子自己的身高，因为100％只会考虑非绝对定位的元素。使用calc(100% + 20px)或类似的方法来实现。

在CSS技巧中了解有关flexbox和position属性的更多信息。

将子元素设置为具有100％的父元素高度，而不考虑其他同级元素

1 个答案: