移动端HTML/CSS容器溢出问题：.main覆盖.main-cars区域求助

核心问题定位 #

真机移动端下.main的渐变溢出覆盖.main-cars，大概率是渐变背景的扩展范围未被正确约束，或是移动端浏览器渲染引擎对容器层级、裁剪规则的解析逻辑和桌面端存在差异。

具体修复步骤 #

1. 给.main容器添加裁剪约束
   强制容器内所有内容（包括渐变背景）仅在自身边界内显示：

   .main {
     overflow: hidden;
     position: relative; /* 保留该属性确保裁剪规则生效 */
   }
   

2. 约束渐变背景的尺寸（若用伪元素实现）
   如果渐变是通过::before/::after伪元素添加的，需确保伪元素完全贴合.main容器：

   .main::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(...); /* 替换为你的渐变代码 */
     z-index: 1; /* 让渐变显示在视频上方，但层级低于外部容器 */
   }
   

3. 调整.main-cars的层级与定位
   给.main-cars设置相对定位和合理的层级，确保它能正常显示在.main上方：

   .main-cars {
     position: relative;
     z-index: 20;
     /* 可根据实际布局添加margin-top: -Xpx，抵消容器间的多余间距 */
   }
   

4. 验证视口设置
   确保HTML头部的视口标签正确，避免移动端页面缩放导致布局偏移：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

为什么之前的z-index设置无效？ #

直接给.main设置z-index会让整个容器层级高于.main-cars，导致内容被覆盖。正确逻辑是仅给.main内部的渐变元素设置z-index，既保证渐变在视频上方，又让.main整体层级低于.main-cars。

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