Lottie动画在Div中溢出至下方Div，overflow:hidden/clip无效求助

以下是针对你遇到的Lottie动画溢出到下方.video区域问题的具体解决步骤：

1. 给.masthead添加定位上下文 #

如果Lottie动画使用绝对定位，父容器.masthead必须设置position: relative，否则overflow: hidden无法约束脱离文档流的动画元素。同时要明确容器的高度，避免因内容高度不足导致的溢出：

.masthead {
  position: relative;
  overflow: hidden;
  background-color: yellow; /* 你的黄色背景 */
  min-height: 500px; /* 根据实际需求设置高度 */
}

2. 约束Lottie动画元素的尺寸与定位 #

将Lottie动画元素作为.masthead的直接子元素，通过绝对定位和尺寸限制让它完全贴合容器，避免溢出：

.masthead .lottie-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 用transform缩放动画，避免直接修改宽高导致的变形或溢出 */
  transform: scale(1);
  transform-origin: center center;
}

3. 调整Lottie初始化配置 #

如果动画本身的画布尺寸过大，在初始化时添加适配配置，强制动画适配容器尺寸：

// 假设使用lottie-web库初始化
lottie.loadAnimation({
  container: document.querySelector('.masthead .lottie-bg'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '你的动画文件路径.json',
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid meet', // 保持动画比例并适配容器
    contain: true
  }
});

4. 排查盒模型干扰 #

检查.video元素是否设置了margin-top: negative，或是.masthead存在padding-bottom/margin-bottom导致视觉重叠，调整对应元素的盒模型样式即可解决。

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