Flexbox布局下无法为含其他元素的容器设置背景视频的问题

你的代码存在几个核心逻辑错误，按以下方式修改即可实现目标效果。

核心错误点 #

• 定位属性写错：CSS不存在display: absolute写法，绝对定位需要用position: absolute声明
• 节点位置错误：当前.video_container放在.homebox_flex外部，根本无法作为homebox的内部背景
• 缺失定位上下文：绝对定位元素默认相对页面根元素偏移，要让它贴合homebox大小，必须给父容器设置非static定位
• 尺寸设置完全错误：写死2200px的宽高不可能匹配容器尺寸，视频标签本身也没做适配设置
• 层级逻辑混乱：不需要给上层内容随便加z-index，只要背景层层级低于默认内容层就不会遮挡

具体修改步骤 #

1. 调整HTML结构，把.video_container移到.homebox_flex内部的最顶部，作为第一个子元素，保证它是容器内的最底层节点
2. 修改对应CSS规则：
   • 给.homebox_flex加相对定位和溢出隐藏，作为绝对定位元素的参考容器，同时裁掉超出容器的背景部分
   • 修正.video_container的定位属性，设置宽高100%铺满父容器，放在最底层
   • 给视频标签加样式，让它完全铺满容器，按比例覆盖不拉伸
   • 删掉冗余的z-index设置，避免层级冲突

修正后完整代码 #

CSS部分 #

.homebox_flex{
    border: 2px solid whitesmoke;
    width: 800px;
    height: 800px;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding:10px;
    align-items: center;
    /* 新增：作为绝对定位的参考容器 */
    position: relative;
    /* 新增：裁掉超出容器的背景内容 */
    overflow: hidden;
  }
  .logotext2{
    font-size: 20px;
    text-shadow: 4px 4px #000000;
    text-align: center;
    padding: 50px;
  }
  .columns{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
  }
  
  .column {
      flex: 30%;
  }
  .video_container{
    /* 修正错误的定位属性写法 */
    position: absolute;
    background: #7f3197;
    /* 宽高100%铺满父容器，移除写死的2200px尺寸 */
    width: 100%;
    height: 100%;
    /* 定位到容器左上角 */
    top: 0;
    left: 0;
    z-index: 0;
  }
  
  
  .backgroundvideo2{
    /* 让视频完全铺满容器 */
    width: 100%;
    height: 100%;
    /* 保持比例覆盖容器，不会拉伸变形，需要完全拉伸可改为fill，完整显示不裁剪改为contain */
    object-fit: cover;
  }
  .footer2{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    list-style: none;
    /* 保证footer在背景上层 */
    position: relative;
  }

/* 保证flex容器内所有非背景内容都在视频上层 */
.homebox_flex > *:not(.video_container) {
  position: relative;
}

HTML部分 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>asd</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>

<body>

    <div class="background2">
        <div class="homebox">
            <div class="homebox_flex">
                <!-- 视频容器移到flex容器内部最顶部 -->
                <div class="video_container">
                    <video class="backgroundvideo2" autoplay muted loop src=""></video>
                </div>
                <div class="logobox2">
                    <div class="logotext2">
                        <h1 class="titles" id="title3">asd</h1>
                        <h1 class="titles" id="title4">asd</h1>
                    </div>
                </div>

                <ul class="columns">
                    <div class="column">
                        <li>asd</li>
                        <li>asd</li>
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd </li>
                    </div>
                    <div class="column">
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd </li>
                    </div>
                    <div class="column">
                        <li>asd</li>
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd </li>
                        <li>asd</li>
                    </div>

                </ul>

            </div>
            <ul class="footer2">
                <li class="ft2link">asd</li>
                <li class="ft2link">asd</li>
                <li class="ft2link">asd</li>
                <li class="ft2link">asd</li>
                <li class="ft2link">asd</li>
            </ul>


        </div>
    </div>

</body>

</html>

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