將絕對定位的div擴展並定位到相對定位的父對象

Question

關於相似主題的許多問題已被回答，但是我在任何地方都找不到該問題的確切答案。 另外，考慮到現在是2018年，我想知道是否有任何新方法可以實現我想要的目標。

基本上，我的<div>內容超出了高度，因此需要滾動。 在<div>是等待或加載模式，該模式在下載新數據時將其覆蓋。 除非用戶向下滾動，並且絕對定位的div（固定為100％）固定在內容的頂部，否則它會正常工作。

我嘗試過使用top和bottom以及多個position並為父母和孩子display變化，但是沒有運氣。

以下是具有所有相關代碼的jsfiddle： https ://jsfiddle.net/wmu7ghmm/2/。

有任何想法嗎？

Answer 1

只需使用戶滾動到頂部即可。

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

只需將其從容器中取出並以與容器完全相同的尺寸將其絕對定位在容器上即可。

.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/