我有一个应该填满整个 div 的叠加层。
HTML:
<div class="phone">
<div class="overlay"></div>
</div>
CSS:
.phone {
position: relative;
width: 300px;
height: 500px;
padding: 15px;
background: #F2F4F5;
overflow: hidden;
cursor: default;
}
.overlay {
display: none;
background: rgba(27, 35, 41, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
我有一些 JS 将内容添加到 .phone div，当添加内容时，它会自动滚动到 .phone div 的底部。但是，叠加层只会拉伸(stretch)以适应 300x500 的原始尺寸。因此，当它向下滚动时，叠加层不再覆盖整个 div。
如果我将 position: fixed 添加到叠加层，它会填满整个屏幕，而不是只填满 .phone div。
最佳答案
将叠加层放在 .phone div 之外，使其成为 body 元素的子元素。然后将 Body 设置为相对位置。
HTML
<body>
<div class="overlay"></div>
<div class="phone"></div>
</body>
CSS:
body {
position:relative;
}
.overlay {
display: none;
background: rgba(27, 35, 41, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.phone {
width: 300px;
height: 500px;
padding: 15px;
background: #F2F4F5;
overflow: hidden;
cursor: default;
}
关于html - 覆盖 div 填充整个父 div，包括滚动时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37081719/