已设置重叠的两个div出现空白、文本错位及小屏溢出问题如何解决？

问题成因 #

• 绝对定位的参考容器配置错误：你仅给兄弟节点.intro-img-div设置了position: relative，但包裹.intro-img-div和.menu-intro-text的共同父容器.menu-intro没有设置相对定位，导致.menu-intro-text的绝对定位参考基准不是当前的.menu-intro模块，而是更上层的祖先元素（如果上层没有其他相对定位元素就是整个页面视口）。你页面中.menu-intro上方还有一个<h1>Our Menu</h1>元素，文本容器top:0的定位规则会让它对齐页面顶部，和下方的图片之间刚好出现等于h1高度的空白，这是意外空隙的核心原因。
• 边距设置冲突覆盖：.menu-intro-text的CSS中先写了margin-bottom:30px，后续的margin:20px会覆盖前者，给文本容器添加上下左右20px的外边距，即使修正了定位基准，顶部20px的margin也会让文本容器和图片顶部出现固定空隙，无法对齐。
• 盒模型高度溢出：.menu-intro-text设置了固定高度height:300px的同时添加了padding:20px，默认content-box盒模型下元素实际总高度为300px+上下padding共40px=340px，比图片容器的300px更高，小屏设备上文本字号更大、内容换行后高度进一步增加，就会溢出容器覆盖下方footer区域。
• 无效垂直对齐属性：vertical-align: middle只对行内元素、表格单元格生效，对绝对定位元素没有作用，你预期的文本垂直居中效果也不会生效。
• 块级元素默认边距：<h1>、<p>等原生标签自带默认上下外边距，会进一步撑高文本容器，加重溢出问题。

修复方案 #

先给父容器添加相对定位作为定位基准，调整边距、盒模型和对齐规则即可，修正后的完整CSS如下：

/* 新增父容器相对定位，作为绝对定位的参考基准 */
.menu-intro {
  position: relative;
}
.intro-img-div{
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-intro-img{
  /* 图片占满容器，避免默认边距/行高带来的额外空隙 */
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-intro-text{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  max-width: 50%;
  /* 固定高度和父容器一致，用border-box避免padding撑大容器 */
  height: 300px;
  box-sizing: border-box;
  /* 仅保留左右外边距，顶部无外边距实现和图片顶部对齐 */
  margin: 0 20px;
  padding: 20px;
  text-align: center;
  /* 用flex实现文本垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu-intro-h1{
  font-size: 3em;
  /* 清除h1默认上下边距，避免额外空隙 */
  margin: 0 0 0.5em 0;
}
.menu-intro-text p{
  font-size: 1.5em;
  /* 清除p默认上下边距 */
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Anđelo Motika