如何修复使用vw单位设置尺寸的div元素重叠问题

• 屏幕尺寸达到特定阈值时，Metal straw campaign模块（对应类名.metalstraw）会覆盖Food CPR模块（对应类名.foodcpr）
• 两个模块共用.initiatives类，内部文本尺寸设置为min(40px,5vw)，尝试设置元素最大尺寸后重叠问题未解决

.initiatives {
    font-size: min(130px,10vw);
    margin: -1% 5% -1% 5%;
    color: white;
    text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
  }
  
  
  .foodcpr {
    background-image: url(https://themalaysianreserve.com/wp-content/uploads/2019/09/TMRAMN19091912.jpg);
    background-size: cover;
    background-color: rgba(255, 0, 0, 40%);
    background-blend-mode: multiply;
  }
  
  .metalstraw {
    background-image: url(https://insideretail.asia/wp-content/uploads/2020/09/straw.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

1. .initiatives设置了上下负外边距，负边距会打乱正常文档流的占位计算，相邻元素会向负边距方向偏移，是重叠的核心诱因
2. 两个模块都没有设置固定高度/最小高度、内边距，完全靠内部文本撑开高度，加上描述的文本尺寸和代码里写的min(130px,10vw)不一致，字体大小随视口变化时，元素实际高度和负边距偏移量不匹配，直接触发覆盖
3. 没有设置盒模型规则，默认的content-box模式下，后续加内边距会撑大元素宽度，进一步引发布局错位

.initiatives {
    /* 字体大小按实际需求设置，和描述保持一致用min(40px,5vw)即可 */
    font-size: min(40px, 5vw);
    /* 移除上下负margin，保留左右边距，需要模块间距用正向下外边距控制 */
    margin: 0 5%;
    /* 加内边距避免文本贴边，同时给模块稳定的占位 */
    padding: 8vh 2rem;
    /* 设置最小高度，保证不同屏幕尺寸下模块占位不会随字体大小突变 */
    min-height: 30vh;
    color: white;
    text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
    /* 内边距算入元素总宽高，不会撑破布局 */
    box-sizing: border-box;
    /* 文本垂直居中，不需要可以删掉 */
    display: flex;
    align-items: center;
  }
  
  
  .foodcpr {
    background-image: url(https://themalaysianreserve.com/wp-content/uploads/2019/09/TMRAMN19091912.jpg);
    background-size: cover;
    background-color: rgba(255, 0, 0, 40%);
    background-blend-mode: multiply;
  }
  
  .metalstraw {
    background-image: url(https://insideretail.asia/wp-content/uploads/2020/09/straw.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

如果要做模块间的紧凑衔接，不要用负margin实现，直接给两个.initiatives元素设置margin-bottom: 0或者小数值的正外边距即可，不会触发文档流错位。

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