所以我已经创建了此页面（抱歉，由于某种原因我无法获得用于渲染图像的代码片段）
https://codepen.io/704621168/pen/bxdmXE
我设法创造了想要的效果。但是我对代码感到困惑。
我只在内部div上使用position：absolute。因此，所有其他元素默认情况下都具有position：static。在那种情况下，为什么它们不重叠呢？是因为我明确定义了包含它们的部分的高度和宽度吗？
* {
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: Tangerine;
}
div {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
width: 100vw;
height: 100vh;
max-width: 100%;
}
section{
width: 100vw;
height: 100vh;
max-width: 100%;
margin-bottom: 3vh;
}
.container{
display: flex;
justify-content: center;
flex-direction: column;
height: auto;
width: auto;
}
.bgimg{
background-attachment: scroll;
background-size: cover;
position: absolute;
z-index: -1;
filter: blur(50px);
}
.fgimg{
position: absolute;
background-size: contain;
z-index: 1;
}
.img1{
background-image: url("http://getwallpapers.com/wallpaper/full/1 /7/2/411287.jpg");
}
.img2{
background-image: url("http://getwallpapers.com/wallpaper/full/a/4/f/411316.jpg");
}
.img3{
background-image: url("http://getwallpapers.com/wallpaper/full/2/2/f/411339.jpg");
}