随着浏览器调整大小，将图像定位在视频上方

Question

问题

我正在使用Font Awesome在视频顶部放置一个图标。即使浏览器调整大小并且视频播放器的位置移动，我希望图标保持在左上角的位置，直到视频上方。

的index.html

<div class="videos">
    <div class="playContainer">
        <i class="fa fa-youtube-play play1 fa-2x"></i>
    </div><!-- /.playContainer -->
    <video src="assets/video/6025-4-normal-medium-yes.mov" class="beat" preload></video>

    <blockquote>
        <p class="quote">"This is really for my dad. I would love to go to his grave say, 'Dad you won, you got 'em.'"</p>

        <cite>
            <p class="name">Earl Lawrence</p>
            <p class="title">Son of Henry Lawrence</p>
        </cite>
    </blockquote>
</div><!-- /.videos -->

video.scss

/*----------------------------------
VIDEO
----------------------------------*/

video {
    max-width: 900px;
    padding-top: 5%;
    width: 90%;
    height: 90%;
    opacity: 1;


    &:hover, &:active {
        @include transitions;
        cursor: pointer;
        // opacity: 1;
    }
}

.videos {
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.video {
    position: relative;
}

.play1 {
    position: absolute;
    top: 2.5%;
    left: 6%;
    color: #fff;
    opacity: 0.25;
}

Answer 1

您可以使用此css将div playContainer放置在您想要的位置。

.playContainer{
    background:green;  <-- you dont need, just used for reference
    position:absolute;
    left:0;  <-- where ever you want it
    top:0;   <-- ^^^
    height:10px;  <-- to make background appear
    width:10px;   <-- ^^
}

通过给容器元素视频位置相对，并给予playContainer绝对位置，您可以将其放置在任何您想要的位置，并根据相对容器大小将其保留在该位置。

Fiddle Example

Answer 2

1）将您的视频放入容器div。

2）将你的文字放在视频之后的那个div内的一个段落中。

3）使用text-align:center

将文字水平居中

4）使用margin-top:X%

垂直对齐文字

5）分别使用position:relative CSS属性和top left属性将文字与视频对齐。