个人网站Portfolio模块视频展示异常：2个正常3个失效求助

问题根源 #

核心问题是容器高度塌陷：

• 前两个视频虽包裹在.video-container中，但CSS给.work video设置了position: absolute，绝对定位元素脱离文档流，无法撑起父容器高度。
• 存在图片时，图片作为块级元素会撑起第三个.work的高度，Grid布局会让同一行的其他.work继承这个高度，所以前两个视频能正常显示；换成三个视频后，所有.work容器都没有内容支撑高度，导致显示异常。
• 第三个视频未包裹在.video-container中，结构不一致加剧了问题。

修复步骤 #

1. 统一HTML结构 #

确保所有视频都包裹在.video-container中，与前两个保持一致：

<div class="work">
  <div class="video-container">
    <video autoplay loop muted playsinline>
      <source src="videos/VendorMap.mp4" type="video/mp4" />
    </video>
  </div>
  <div class="layer">
    <h3>Dice Distribution Application</h3>
    <p>text</p>
    <!--<a href="#"><i class="fa-solid fa-link"></i></a>-->
  </div>
</div>

2. 调整CSS定位逻辑 #

移除.work video的绝对定位属性，让视频作为正常流元素撑起容器高度：

.work video {
  width: 100%;
  border-radius: 10px;
  display: block;
  transition: transform 0.4s;
  /* 移除以下绝对定位代码 */
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
}

3. 可选优化：避免布局跳动 #

如果视频加载前容器高度为空，可给.video-container设置最小高度：

.video-container {
  position: relative;
  width: 100%;
  min-height: 200px; /* 根据视频比例调整数值 */
}

原理说明 #

• 移除绝对定位后，视频作为块级元素填充.video-container，自然撑起父容器高度，.work拥有实际尺寸后就能正常显示。
• .layer依然绝对定位在.work上，不影响正常布局，hover交互效果也能正常触发。

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