如何通过HTML/CSS实现视频仅在FirstBox容器内显示（overflow:hidden无效）

问题原因 #

#BgVideo 使用了 position: absolute 绝对定位，而它的父容器 .FirstBox 默认是 static 静态定位，绝对定位元素不受静态定位父容器的 overflow 属性约束，因此你添加的 overflow: hidden 不生效。

解决方法 #

给 .FirstBox 新增定位属性和溢出裁剪规则即可，调整后的完整代码如下：

.FirstBox {
  margin-top: 0;
  margin-left: 100px;
  margin-bottom: 78px;
  height: 60px;
  /* 新增以下2行规则 */
  position: relative;
  overflow: hidden;
}

#BgVideo {
  position: absolute;
  left: -150px;
  top: -650px; /* 原代码重复定义了两次top，此处删除冗余属性 */
  z-index: -100;
}

HTML代码无需修改。如果最终显示的视频区域不符合预期，调整 #BgVideo 的 top、left 偏移值即可控制视频的展示位置。

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