这可能会更先进，但我无法在任何地方得到答案，而且我开始发疯了。
我设法按百分比值将云放置在所需的位置，因此它们与视口/设备屏幕成比例。我的div具有相对位置，因此内部的图像（都具有绝对位置）可以相对于包装容器（div）在内部移动]
但是，如果我更改或向图像添加顶部或底部位置百分比值，则图像会以某种方式移出父div（具有相对位置），因此，如果更改包装div的填充（覆盖屏幕的更多区域），图像不会受到影响，它们不会沿着div的填充变化移动，就好像它们没有嵌套在我的div中一样。
有人知道它到底在发生什么吗？
<body>
<div class="top-container">
<img class="top-cloud">
<h1>I'm Marcos</h1>
<h2>A Software Developer</h2>
<img class="bot-cloud">
<img class="mountain">
</div>
这是我的CSS
body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #79bac1;
position: relative;
padding: 10% 0 0 0;
}
.top-cloud {
position: absolute;
width: 8%;
left: 15%;
}
.mountain {
width: 35%;
display: block;
margin: auto;
}
.bot-cloud {
position: absolute;
width: 8%;
right: 15%;
top: 10% /*If I delete this value, the image (.bot-cloud) moves in and it gets affected by the ".top-container" padding. But if I leave it, and modify the padding in the ".top-container", it gets moved out of the ".top-container" as if it's not wrapped by it.*/
}
您的图像带有position: absolute;，它将其从文档流中删除。就位置而言，它唯一的参考是具有position: relative的最接近的父元素。如果top为0，它将直接位于父对象的边界。父级的填充根本不会改变（请参见下面的代码段）。如果使用负top值，它将移动父对象的[[outside，例如top: -10%将其放置（父对象的高度的10％）上方（=外部）的顶部边框父母。像top: 10%这样的正值会将其放置在父项上边框的10％（父项高度的下）以下（=内部）中。
body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #79bac1;
position: relative;
padding: 10% 0 0 0;
}
.top-cloud {
position: absolute;
width: 8%;
left: 15%;
}
.mountain {
width: 35%;
display: block;
margin: auto;
}
.bot-cloud {
position: absolute;
width: 8%;
right: 15%;
top: 0%;/*If I delete this value, the image (.bot-cloud) moves in and it gets affected by the ".top-container" padding. But if I leave it, and modify the padding in the ".top-container", it gets moved out of the ".top-container" as if it's not wrapped by it.*/
}<div class="top-container">
<img class="top-cloud">
<h1>I'm Marcos</h1>
<h2>A Software Developer</h2>
<img src="https://placehold.it/200x150/d66" class="bot-cloud" >
<img src="https://placehold.it/150x100/6a9" class="mountain">
</div>