如何将X按钮定位在YouTube视频的右上角

Question

我有一个名为"stage"的div，其中包含一个YouTube视频，还有一个名"stageX"的div将包含一个X按钮（稍后我将对其进行编程，以在单击时隐藏视频）。

我试图将X定位在YouTube视频的右上角，并在用户放大和缩小页面时保持其位置。

我把"stage"设置为相对的，把"stageX"设置为绝对的，但这不起作用。。。我在这里做错了什么？

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

<section id="headerstage">
        <div id="stageX">X</div>
        <div id="stage">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/e-ORhEE9VVg" frameborder="0" allowfullscreen></iframe>
        </div>
</section>

CSS

#body{
    color:black;
}
#stage{
    text-align:center;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#stageX{
    position:absolute;
    float:right;
}

Answer 1

a）不要同时使用绝对定位和浮动。只需使用绝对定位。

b） 对于相对于元素的位置，绝对定位的元素需要在相对定位的元素内部。

c） 绝对定位使用top、right、bottom和left CSS属性。因此，如果您希望某个内容位于包含元素的右上角，您可以执行以下操作：

.container {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.container div {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <div>X</div>
</div>