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

Question

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

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

我将 'stage' 设置为相对值，将 'stageX' 设置为绝对值，但这不起作用...我做错了什么？

<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>

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

How to position X button on top right of YouTube video?

html

css

iframe

position