我需要你的帮助!
一直在寻找解决方案，但找不到，所以我想我应该问一下。
对于学校元素，我需要将随机数量的大厅放置在 map 上的正确位置。
举个例子，我只使用了 4 个大厅，对从 JSON 和 Angular 中检索到的所有信息进行了硬编码，如您在 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 的绝对定位没有像它应该的那样工作。
一切都以 1000 像素的宽度和 500 像素的高度计算，但如果浏览器也调整大小，它应该全部调整大小。
让 parent 调整到合适的高度也是我努力的事情。
有人可以帮我解决这个问题吗？
最佳答案
问题是在使用 top 时属性，百分比计算基于 height of the container ，而不是它的宽度。
要解决此问题，请设置 top到 0 然后使用 margin-top: x%; .所有边距都是根据容器的宽度计算的，因此当窗口调整大小时，margin-top 也会缩小。
关于css - 响应式 CSS 绝对顶部位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34863982/