HTML/CSS 无法向上重新定位嵌入的视频

Question

我正在尝试将嵌入的视频向上移动。我已经尝试了很多东西，但我似乎无法找到如何做到这一点。

这是它现在的样子的屏幕截图：https://i.imgur.com/rPjZMbv.png

HTML代码：

<div class="movie">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/3TKDCQCTuzQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS代码：

.movie{
    display: block;
    position: relative;
    margin-bottom: 30%;
    margin-left: 12%;
}

如果我更改边距底值，则什么也不会发生。我也尝试过使用 bottom 和 margin-top -%，但也没有成功。

Answer 1

取决于文本是否与视频位于同一父容器中。如果不同，就用margin-，比如margin-top: -300px;，但是我不建议用这个。如果您可以完全控制 html，请将文本和视频移动到同一父容器，例如：

.containerx {
    display: flex;
    flex-wrap: wrap;
}

.movie {width: 33%; overflow: hidden;}
.text {width: 66%;}

<div class="containerx">
    <div class="movie">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/3TKDCQCTuzQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>

之后只需要填充、边距等

HTML/CSS 无法向上重新定位嵌入的视频

HTML/CSS Unable to reposition embedded video upwards

html

css

position

embedded-resource