响应式CSS绝对顶部位置

Question

我需要你的帮助!我一直在寻找解决方案，但找不到，所以我想我应该直接问它。

对于一个学校项目，我需要在地图上将随机数量的大厅放置在正确的位置。举个例子，我只用了4个halls，只是硬编码了所有的信息，这些信息是用Angular从JSON中检索出来的，正如你在this CodePen中看到的那样

<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>

我已经解决了当页面调整大小时调整大厅大小的问题。剩下的唯一问题是top的绝对定位不能正常工作。

所有的东西都是根据1000px的宽度和500px的高度来计算的，但是如果浏览器也调整大小，那么所有的大小都应该调整。

此外，让父母调整到合适的高度也是我努力解决的问题。有没有人能帮我一下？

Answer 1

问题是，在使用top属性时，百分比是基于height of the container而不是它的宽度计算的。要解决此问题，请将top设置为0，然后使用margin-top: x%;。所有的边距都是根据容器的宽度计算的，所以当调整窗口大小时，边距顶部也会缩小。