我试图在具有固定宽度和高度的可滚动父div 上放置一个模态叠加层，但我无法让它工作。这是我正在使用的 CSS：
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
overflow-y: scroll;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
}
.modal {
width: 200px;
height: 100px;
background: white;
}
我有以下jsfiddle来说明这个问题：
https://jsfiddle.net/8wgpt0d7/
当您滚动到底部时，您可以从小提琴中看到模态叠加层不再覆盖背景内容，我想让模态覆盖内容，但我不确定如何。
任何提示或帮助将不胜感激！
试试这个：
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child {
width: 100%;
height: 100%;
overflow-y: scroll;
background: rgba(0,0,0,0.55);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right:0;
width:100%;
}
.modal {
position: absolute; /* effectively fixed */
top: 50px;
left: 20px;
right:20px;
bottom:0;
background-color: #FFF;
height: 100vh;
max-height:100px;
}<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>我有一个不太复杂但非常动态的答案？ https://jsfiddle.net/f2k7z4u0/
简讯
if($('.overlay').prop('display') != 'none'){
var $parentHeight = $('.parent')[0].scrollHeight;
$('.overlay').css('height', $parentHeight);
}
更新的 CSS(仅适用于 .modal(
.modal {
width: 200px;
height: 100px;
background: white;
position: absolute;
top: 40px;
}
var scrollMaxValue = $('.child').prop('scrollHeight');
var currentPosition = 0;
$('.overlay').mousewheel(function(e,d) {
e.preventDefault();
if ((d > 0) && (currentPosition > 100)){
currentPosition = currentPosition - (10 * 10)
}
else if((d < 0) &&(currentPosition < scrollMaxValue)){
currentPosition = currentPosition + (10 * 10)
}
$('.child').scrollTop(currentPosition);
});.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child{
width:100%;
height:100%;
overflow-y: auto;
}
.overlay{
position: absolute;
width:333px;
height:100%;
top:0;
left:0;
background: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
left:20%;
top:25%;
margin:0 auto;
width: 200px;
height: 100px;
background: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>