Question

我有一个名为“stage”的div，其中包含一个YouTube视频，以及一个名为“stageX”的div，其中包含一个X按钮（稍后我会编程以隐藏视频）。

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

我将'stage'设置为relative，'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属性。因此，如果您希望某个内容位于包含元素的右上角，您可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在YouTube视频的右上角放置X按钮？

1 个答案: