html - 如何将 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) 不要同时使用绝对定位和 float 。只需使用绝对定位即可。

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>