响应式 CSS 绝对顶部位置

Question

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

对于学校项目，我需要将随机数量的大厅放置到地图上的正确位置。例如，我只使用了 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 的绝对定位不能正常工作。

所有内容均以 1000px 的宽度和 500px 的高度计算，但如果浏览器也调整大小，则所有内容都应调整大小。

让 parent 调整到合适的高度也是我遇到的困难。有人可以帮我解决这个问题吗？

Answer 1

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

响应式 CSS 绝对顶部位置

Responsive CSS absolute top position

css

position

css-position

absolute

responsive-design