Css 保证金置顶问题

Question

我有这样的布局：

<div id="wrapper">
  <div class="player-wrapper">
    <div class="player-holder">
      <div class="player-thumb"></div>
    </div>
  </div>
</div>

https://jsfiddle.net/y2yjtnoz/1/

问题是当我添加

margin-top:50px;

到玩家拇指

整个播放器支架 div 下降 50px。

我希望它表现得像我添加的那样

top:50px;

到 player-thumb（而不是 margin-top:50px），但我想用 margin。

我真的不知道怎么解决。

谢谢。

编辑：

实际上这并没有完全解决问题，我创建了新的 fiddle 和一些新元素（右边的播放列表和一些媒体查询）：https://jsfiddle.net/y2yjtnoz/4/

我已经将 overflow:auto 应用到 player-holder（与 overflow:hidden 相同），但 'auto' 更能说明问题。现在，当应用媒体查询并且播放列表下降到播放器下方时，您可以看到播放列表并没有完全清除播放器，因此播放器滚动，或者溢出隐藏的播放器在底部被稍微切断。

Answer 1

将 overflow:auto 附加到 .player-holder

Source (Collapsing margins)

Answer 2

只需添加

overflow:hidden;

到

.player-holder 

Answer 3

从#wrapper

中删除 position: relative