Css对齐&；html5视频标签的定位_Html_Css

Css对齐&；html5视频标签的定位

html css

Css对齐&；html5视频标签的定位,html,css,Html,Css,我有两个视频标签，我想在屏幕的下角对齐。此外，内部视频标签应与外部视频标签重叠，如下图所示：我可以想出： <body> <div class="container"> <div class="widget_contaner"> <div class="widget_head">this is head of widget</div> <div class=

我有两个视频标签，我想在屏幕的下角对齐。此外，内部视频标签应与外部视频标签重叠，如下图所示：

我可以想出：

<body>
    <div class="container">
        <div class="widget_contaner">
            <div class="widget_head">this is head of widget</div>
            <div class="widget_body">
                <video class="large_video" src="#"></video>
                <video class="mini_video" src="#"></video>
            </div>
        </div>
    </div>
</body>

所以我想知道如何才能让这些视频标签像图中所示那样相对定位

Jsfiddle：

看看这是否就是你要找的。请注意，我更改了背景和边框，以便可以看到它。主要需要在较大的视频帧中添加绝对定位，同时将一些底部属性设置为0

.large_video {
    height: auto;
    width: 100%;
    border: 2px solid #000;
    position: absolute;
    bottom: 0;
}

像这样吗

我添加了背景色，这样更容易看到

.widget_body {
    width: 240px;
    height: 150px;
    position: relative;
}
.large_video {
    height: 100%;
    width: 100%;
    background: green;
}
.mini_video {
    position: absolute;
    height: 30%;
    width: 30%;
    top: 0px;
    right: 0px;
    opacity: 0.75;
    background: purple;
}

小部件主体是相对定位的，您只需要给迷你视频绝对位置和右上角0px。如果您希望小部件位于右下角，请执行底部：0；对于widget容器

我认为您包含了错误的JS Fiddle链接——无论如何，在文章的底部。。。

.widget_body {
    width: 240px;
    height: 150px;
    position: relative;
}
.large_video {
    height: 100%;
    width: 100%;
    background: green;
}
.mini_video {
    position: absolute;
    height: 30%;
    width: 30%;
    top: 0px;
    right: 0px;
    opacity: 0.75;
    background: purple;
}