移动端<767px视口下视频容器内棕色背景遮罩层定位失效问题

你在移动端断点里仅添加了遮罩的flex布局规则，但完全没有覆盖大屏端为遮罩写死的定位、尺寸属性。
处于绝对定位状态的元素，本身已经脱离常规文档流，摆放位置完全由top/right/bottom/left偏移值决定，和flex布局没有任何关系——flex属性只会影响元素内部的子元素排列，不会改变元素自身的摆放位置。这就是你改完代码完全没有响应的根本原因。

修正方案 #

• 必须在移动端媒体查询中，显式重置大屏端给.brown-be设置的固定位置、尺寸值，匹配移动端预期的布局形态
• 保留你原本需要的flex布局规则，用于调整遮罩内部内容的对齐方式
• 给视频元素补充适配规则，避免移动端播放时拉伸变形

修正后的参考CSS：

/* 大屏端原有样式保留 */
.background-video {
  position: relative;
  height:100%;
  width:100%;
  overflow: hidden; /* 避免绝对定位元素溢出容器 */
}

#video {
  z-index: 0;
  width: 100%;
  object-fit: cover; /* 避免视频移动端拉伸变形 */
  display: block;
}

.brown-be {
  background-color: rgba(157,124,94,1);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  height: 60%;
  z-index: 1;
}

/* 移动端断点 补全缺失的属性覆盖 */
@media (max-width: 767px) {
  .brown-be {
    /* 重置大屏端的固定偏移和尺寸 */
    right: auto;
    left: 0;
    width: 100%; /* 移动端全宽展示 */
    height: auto; /* 取消写死的60%高度，随内容自适应 */
    min-height: 30%; /* 可根据设计稿调整最小高度 */
    padding: 24px 16px; /* 增加内边距，避免内容贴边 */
    /* 保留你需要的内部flex布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

避坑提示 #

• 绝对定位元素的四个方向偏移值（top/right/bottom/left）优先级远高于布局属性，只要没有被显式设置为auto，就会一直生效，不会因为加了flex就自动失效
• 调整绝对定位元素的宽度时，必须把对应的方向偏移设为auto，否则会出现元素溢出容器的问题：比如你只把width改成100%，但保留了原来的right:0，元素会从右边缘开始往左撑满100%宽度，实际会超出容器左边界
• 如果调整完仍然没有生效，可以检查媒体查询的断点值是否被其他更高优先级的CSS覆盖，确认没有同选择器的规则在断点外重复定义相同属性
• 排查时可以临时给.brown-be加个高饱和的背景色，直观看到它的实际定位和尺寸，快速定位问题

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