Html CSS-如何在3层中正确添加3个图像

我有三层图像。（）

主要的问题是，山脉应该固定在底部，但根据屏幕大小，它们在页面上浮动

第二个问题是，我不是css方面的高手，如果有任何改进css代码的建议，我将不胜感激

关于山区的代码：

#foreground-mountains {
position: absolute;
z-index: 10;
bottom: 0;
left: 0;
background-size: cover;
width: 100vw;
background: url("/img/multiplikationsdreiecke/Vordergrund-Berge.png") no-repeat;
}

@media only screen and (min-width: 1024px) {
#foreground-mountains {
width: 100%;
height: 250px;
   }
}

---

你可以把这些放在一起：

• 您可以在

  background

  属性中堆叠多个图像、颜色和渐变
• 您可以定义多个用逗号分隔的背景大小（只需保持声明的背景顺序）

正文{
高度：100vh；
背景：
网址（“https://s7.postimg.cc/nz903xrjv/Vordergrund-_Berge.png"),
网址（“https://s7.postimg.cc/6yq3v96sr/Pyramide.png"),
网址（“https://s7.postimg.cc/wu9ueft6z/Hintergrund.png");
背景重复：无重复；
背景位置：底部中心；
/*适应你的需要*/
背景尺寸：包含，300px，封面；
}

您可以将这一切放在一起：

• 您可以在

  background

  属性中堆叠多个图像、颜色和渐变
• 您可以定义多个用逗号分隔的背景大小（只需保持声明的背景顺序）

正文{
高度：100vh；
背景：
网址（“https://s7.postimg.cc/nz903xrjv/Vordergrund-_Berge.png"),
网址（“https://s7.postimg.cc/6yq3v96sr/Pyramide.png"),
网址（“https://s7.postimg.cc/wu9ueft6z/Hintergrund.png");
背景重复：无重复；
背景位置：底部中心；
/*适应你的需要*/
背景尺寸：包含，300px，封面；
}

非常感谢。使用多个div的原因是将输入放置在金字塔内部。我只能相对于整个窗口定位元素，对吗？如果是这样，如何正确调整输入属性相对于金字塔？非常感谢。使用多个div的原因是将输入放置在金字塔内部。我只能相对于整个窗口定位元素，对吗？如果是，如何相对于棱锥适当调整输入属性？