Html 相对于屏幕的CSS顶部

我有一个问题，我有多个元素匹配的背景图像的位置。当窗口大小改变时（特别是变得非常小），元素的“顶部”值就不会保持不变。这个小问题累积起来，10个元素之后，一切都完全错了。随意调整窗口大小（尽量使其非常小）以轻松查看问题

如何解决此问题并使其始终与背景匹配

html，正文{
保证金：0；
}
div{
最小宽度：100%；
最小高度：100%；
背景图像：url（“https://i.imgur.com/EX2L8y6.jpg");
背景大小：100%，100%；
背景重复：无重复；
位置：绝对位置；
}
.TheBtn{
位置：相对位置；
背景色：红色；
不透明度：0.5；
高度：4.4vw；
宽度：22.2vw；
左：19vw；
排名：10.8vw；
}

将元素设置为相对时，意味着所有子元素都是相对于父元素的。BTN设置为相对，但没有子元素。您需要将div设置为relative as。BTN是div的子元素，并且的位置相对于最近的相对父元素（div）是绝对的。以下是我用来测试的代码：

html，正文{
保证金：0；
}
div{
最小宽度：100%；
最小高度：100vh；
背景图像：url（“https://i.imgur.com/EX2L8y6.jpg");
背景大小：100%，100%；
背景重复：无重复；
位置：相对位置；
}
.TheBtn{
位置：绝对位置；
背景色：红色；
不透明度：0.5；
高度：4.4vw；
宽度：22.2vw；
左：19vw；
排名：10.8vw；
}

因此提供了一个HTML代码段编辑器，可以让您直接执行代码，不要期望人们手动复制粘贴代码，然后运行实验。我建议您查看CSS

位置的属性，看看它们的实际含义。@Jesse de Bruijne您的意思是什么，位置：修复也不起作用，因为我的网站可以滚动，在这种情况下，元素与用户一起滚动使用vh单元，顶部不显示vw@TemaniAfif感谢您的想法，但不幸的是，这似乎不太管用。谢谢！但是有一个问题，为什么在div下添加Hi会破坏按钮的位置？这是因为它改变了div的宽度。如果运行上面的代码片段并查看div的尺寸，它是638px（宽度）x220px（高度）。添加跨距时，会将div的宽度更改为621px，因为它会强制显示滚动条。如果将HTML和正文的宽度设置为100%，并添加overflow-x:hidden；它强制内容在屏幕尺寸范围内。看起来你还需要将div的宽度设置为100vw。啊，非常感谢！你的帮助帮了我很多麻烦！！：）没问题！这件事并不容易，当你来到这个网站寻求帮助和学习时，不应该遇到态度和攻击。这里有些人简直就是粗鲁无礼。如果你还有其他问题，请放心，我会尽力帮助你的！你介意帮我解决我的另一个问题吗？这与这篇文章也有点相关，所以我觉得你可能有专业的技能来帮助我：）