響應式CSS絕對頂部位置

Question

我需要你的幫助！ 一直在尋找解決方案，但找不到一個解決方案，所以想我應該問一下。

對於一個學校項目，我需要將隨機數量的大廳放置在地圖上的正確位置。 作爲一個例子，我只是用4個大廳這是一個從有角一個JSON retreived，你可以在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> 

看到我已經解決了調整大廳的問題上只是硬編碼的所有信息，當頁面得到調整。 唯一的問題是，絕對定位與頂部是不應該像它應該。

一切都是以1000px的寬度和500px的高度來計算的，但是如果瀏覽器也調整大小，它應該都會調整大小。

也讓父母調整到正確的高度是我奮鬥的事情。 有人可以幫助我嗎？

Answer 1

問題是，當使用top屬性時，百分比是根據height of the container計算的，而不是其寬度。 要解決此問題，請將top設置爲0，然後使用margin-top: x%;。所有邊距都是根據容器的寬度進行計算的，所以當窗口大小調整時，margin-top也會縮小。