CSS:对齐大小未知的元素

Question

我正在构建一个基于https://apprtc.appspot.com/的视频聊天应用程序(要运行这个应用程序，您需要在两个单独的选项卡中打开相同的URL )。

我想对这个参考应用程序做两个修改。

1. 在浏览器窗口中将视频居中。
2. 在大视频的右下角对齐小视频(类似Skype)。

我设法用http://css-tricks.com/centering-in-the-unknown/解决了#1，但我找不出#2，问题是大的视频大小是动态的(WebRTC会随时间而改变其大小，取决于CPU和带宽条件)。随着浏览器窗口的大小调整(适合于查看)，它也会增长/缩小。当大视频改变大小时，小视频就失去了对齐。

，当大视频的大小随时间变化时，如何将小视频对齐到大视频的右下角？

更新：请提供一个有重叠视频的解决方案，而不仅仅是框。另外，请确保随着浏览器窗口的增长/缩小，视频会增长/缩小。

Answer 1

您可以使用CSS定位：

HTML

<div id="container">
    <div id="big_video">
        test
         <div id="small_video">test2</div>
    </div>

</div>

CSS

#big_video{
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: relative;
}

#small_video{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 0;
    right: 0;
}

小提琴：http://jsfiddle.net/FhtCP/12/