CSS top：百分比值不規模

Question

我知道這很奇怪，但我試圖在遊戲板上製作一張卡片。我目前的HTML在下面的筆中。

http://codepen.io/anon/pen/EPzGWv

<container-> 
     <policy-boards> 
      <policy-board-container class='fascist'> 
       <img class='policy-board' src='http://i.imgur.com/02xsze2.png?1'> 
       <img src="http://i.imgur.com/Vfa97pj.png?1" alt="" class="fascistcard1">   
      </policy-board-container> 
      <policy-board-container> 
       <img class='policy-board liberal-board' src='http://i.imgur.com/I8OiXQ8.png?1'> 
      </policy-board-container> 
     </policy-boards> 
</container-> 

而CSS：

* { 
    margin: 0; 
    padding: 0; 
    display: block; 
} 

style { 
    display: none; 
} 

container- { 
    display: flex; 
    flex-direction: row; 
    /*flex-wrap: wrap;*/ 
} 

policy-boards { 
    flex-grow: 3; 
    flex-basis: 37.5%; 
} 

policy-board-container { 
    /*max-width: 100%; 
    max-height: 100%;*/ 
    width: 100% 
} 

policy-board-container.fascist { 
    positon: relative; 
    top: 0; 
    left: 0; 
    width: 100% 
} 

img.policy-board { 
    /*max-height: 100%; 
    max-width: 100%;*/ 
    width: 100%; 
    height 100%; 
    border-radius: 0; 
} 

img.liberal-board { 
    border-radius: 0 0 10px 10px; 
} 

img.fascistcard1 { 
    position: absolute; 
    height: auto; 
    width: 11.5%; 
    top: 12.5%; 
    left: 9.7%; 
} 

出於某種原因上：百分比不會使圖像移動時政策板容器變小。如果您將視圖設置爲橫向，則圖像陣容有一個點，但在縮放窗口時，卡的頂部邊緣保持在同一個位置。

我希望對類似問題的任何幫助或指示。我找到了那些建議爲父元素設置寬度的人，但這沒有幫助。

Answer 1

你有一個錯字：

policy-board-container.fascist { 
    positon: relative; 
    ... 
} 

應改爲 「斷定我上」。 這適用於我。

最後，更改頂部值，以正確的偏移：

img.fascistcard1 { 
    ... 
    top: 12.5%; /* <<< make this 27% */ 
}