Expand and position absolutely positioned div to relatively positioned parent

Question

Many questions have been asked answered about similar topics, but I couldn't find the exact answer to this question anywhere. Also, given that it's 2018, I'm wondering if there are any new methods to achieve what I'm looking for.

Basically, I have a <div> that has content that exceeds the height, thus will need to scroll. Within that <div> is a waiting, or loading modal that covers it while downloading new data. It works fine, unless the user scrolls down, and the absolutely positioned div, at 100%, is pinned to the top of the content.

I've tried using top and bottom and multiple position and display variations for both the parent and the child, to no luck.

The following is a jsfiddle with all of the associated code: https://jsfiddle.net/wmu7ghmm/2/ .

Any ideas?

Answer 1

Just make the user scroll to the top.

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>

CSS

.container {
  width:300px;
  height:300px;
  max-height:300px;  
  overflow-y:scroll;
  background-color:#dedede;
  position:relative;
}
.container.no-scroll {
  overflow: hidden;
}

.waiting {
  position:absolute;
  height:100%;
  width:100%;
  color:white;
  text-align:center;
  padding-top:20px;

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


}

.waiting:hover {
  background-color:rgba(0,0,0,0.35);
  transition:background-color 250ms ease;
}
.waiting:after {
  content:'PLEASE WAIT...';
  font-size:30px;
}

Answer 2

Just take it out of the container and position it absolute over it with the exact same dimensions as the container.

.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; 
}

https://jsfiddle.net/wmu7ghmm/4/