Html 展开绝对定位的div并将其定位到相对定位的父级

关于类似的话题，很多问题都被问到了，但我在任何地方都找不到这个问题的确切答案。同时，考虑到现在是2018年，我想知道是否有新的方法来实现我所寻找的目标

基本上，我有一个

，它的内容超过了高度，因此需要滚动。在该

中有一个等待或加载模式，在下载新数据时覆盖它。它工作正常，除非用户向下滚动，并且绝对定位的div（100%）固定在内容的顶部

我试过对父母和孩子使用

top

和

bottom

以及多个

position

和

display

变体，但没有成功

以下是包含所有关联代码的JSFIDLE:

---

有什么想法吗？

只要让用户滚动到顶部即可

HTML

<div class="container" id="container">
 <div id="wait-modal" class="waiting" style="display:none"></div>

  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  </div>

 <br>

 <button onclick="document.getElementById('wait-modal').style.display='block';document.getElementById('container').classList.add('no-scroll');document.getElementById('container').scrollTo({top:0})">
   Load Data
 </button>

---

只需将其从容器中取出，并以与容器完全相同的尺寸将其绝对放置在容器上即可

.waiting {
  position:absolute;
  z-index:10;
  width:300px;
  height:300px;
  max-height:300px;  
  color:white;
  text-align:center;
  padding-top:20px;

  background-color:rgba(0,0,0,0.5);
  transition:background-color 250ms ease; 
}

---

谢谢你，先生，这是我今天看到的第一个用正统英语写的问题，它提出了一个实际的问题，而不是含糊不清的难题。我会看看我能做些什么。给你：@TftW：谢谢，购买你的解决方案只有在用户尚未向下滚动的情况下才有效。如果你不介意他们跳回到顶部：这很适合我的需要，谢谢@TricksfortheWeb很高兴能提供帮助。不过，我仍在研究另一种方法。这是一个挑战，我无法抗拒其中的一个：）不幸的是，因为您的解决方案使用固定的宽度和高度，它不适合我。我需要更具动态性和响应性的东西。@pshep123好吧，你的代码片段使用了固定的宽度和高度，这就是我选择这条路线的原因。你要用flex吗？我有点喜欢challenge这个片段对容器使用了固定的宽度和高度，但是请注意，

.waiting

类使用的是百分比。我对使用flex非常开放。期待看到你的想法，谢谢！

.waiting {
  position:absolute;
  z-index:10;
  width:300px;
  height:300px;
  max-height:300px;  
  color:white;
  text-align:center;
  padding-top:20px;

  background-color:rgba(0,0,0,0.5);
  transition:background-color 250ms ease; 
}