防止绝对定位的 div 增加其父级的大小

Question

我有一个装满内容的div，我想在它后面堆叠背景图像。我不想组合这些背景图像，因为我得到了一个长"；最大的满足感涂料"；在Google PageSpeed上，我发现堆叠较小的图像可以在这个指标上给我更好的分数。页面必须滚动到内容的底部，但我希望在内容结束时缩短背景图像。

---

下面的代码几乎达到了我想要的效果，但没有缩短背景图像。

img {
opacity: 0.3;
z-index: -999;
}
.abs {
position: absolute;
}
footer {
background-color: rgba(238,130,238, 1);
}
.overflow{
overflow: hidden;
}

<div class='overflow'>
<div class='abs'>
<img src='https://sitesent.com/static/6d91c86c0fde632ba4cd01062fd9ccfa/5a190/gatsby-astronaut.png' />
<img src='https://sitesent.com/static/6d91c86c0fde632ba4cd01062fd9ccfa/5a190/gatsby-astronaut.png' />
</div>
<h1>Hi people</h1>
<p>This page should be able to scroll.</p>
<div class='filler'>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
</div>
<footer>
But the bottom of the page should be right below this line. The background images should not shrink, but should be cut off at this point
</footer>
</div>

---

我的项目是使用gatsby的，所以我使用gatsby为这个问题创建了一个沙箱，但我在沙箱方面遇到了一些问题，所以我认为它不能完全工作

Answer 1

添加：

position: relative; 

到类为的元素

overflow

更新的演示：更新了jsfiddle