[英]Expand and position absolutely positioned div to relatively positioned parent
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. 另外,考虑到现在是2018年,我想知道是否有任何新方法可以实现我想要的目标。
Basically, I have a <div>
that has content that exceeds the height, thus will need to scroll. 基本上,我的<div>
内容超出了高度,因此需要滚动。 Within that <div>
is a waiting, or loading modal that covers it while downloading new data. 在<div>
是等待或加载模式,该模式在下载新数据时将其覆盖。 It works fine, unless the user scrolls down, and the absolutely positioned div, at 100%, is pinned to the top of the content. 除非用户向下滚动,并且绝对定位的div(固定为100%)固定在内容的顶部,否则它会正常工作。
I've tried using top
and bottom
and multiple position
and display
variations for both the parent and the child, to no luck. 我尝试过使用top
和bottom
以及多个position
并为父母和孩子display
变化,但是没有运气。
The following is a jsfiddle with all of the associated code: https://jsfiddle.net/wmu7ghmm/2/ . 以下是具有所有相关代码的jsfiddle: https ://jsfiddle.net/wmu7ghmm/2/。
Any ideas? 有任何想法吗?
Just make the user scroll to the top. 只需使用户滚动到顶部即可。
HTML 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 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;
}
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/ https://jsfiddle.net/wmu7ghmm/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.