Bootstrap div尺寸定位问题：视频聊天页面本地视频位置异常

我来帮你搞定这个视频聊天页面的布局问题！你遇到的核心问题是：float-right对固定定位（fixed-bottom）的元素完全无效——固定定位的元素脱离了正常文档流，浮动属性根本不会对它起作用。再加上全屏的远程视频容器占满了视口，就导致本地视频窗口跑到了左侧。

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Video Chat</title>
</head>
<body>
    <!-- 远程视频容器：占满整个视口 -->
    <div class="vw-100 vh-100 bg-primary">remoteVideo</div>
    
    <!-- 本地视频容器：固定在右下角，设置间距和层级 -->
    <div class="fixed-bottom bg-light" style="height: 200px; width: 200px; right: 1rem; bottom: 1rem; z-index: 10;">myVideo</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

关键改动说明 #

• 移除了无效的float-right类，改用right: 1rem直接控制元素距离右侧的间距，配合fixed-bottom实现右下角定位
• 添加z-index: 10确保本地视频窗口显示在远程视频的上方（避免被全屏容器遮挡）
• 保留了vw-100 vh-100让远程视频容器占满整个视口，符合你的需求

这样修改后，本地视频窗口就会稳稳地固定在页面右下角啦！

内容的提问来源于stack exchange，提问作者Dercni