代码之家 › 专栏 › 技术社区 › elPastor

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

position css html

elPastor · 技术社区 · 8 年前

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

基本上,我有 <div> 其内容超过高度,因此需要滚动。在此范围内 <div> 是一种等待或加载模式,在下载新数据时覆盖它。它工作正常,除非用户向下滚动,并且绝对定位的div(100%)固定在内容的顶部。

我试过使用 top 和 bottom 和多个 position 和 display 父母和孩子都有变化,没有运气。

下面是一个包含所有关联代码的JSFIDLE: https://jsfiddle.net/wmu7ghmm/2/ .

有什么想法吗?

2 回复 | 直到 8 年前

yaakov 8 年前

只需让用户滚动到顶部即可。

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

Facundo Corradini 8 年前

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

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