如何实现CSS子元素覆盖父容器，而非将父元素向下撑开拉伸

要实现img子元素覆盖header父元素、不撑开父容器的效果，只需要让图片脱离正常文档流即可，通过定位属性即可实现：

修改后的CSS代码 #

.headerContainer {
  background: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  /* 新增：作为子元素绝对定位的参照容器 */
  position: relative;
  /* 可选：如果不需要显示图片超出header范围的部分，打开下面这行 */
  /* overflow: hidden; */
}

.mainImage {
  width: 300px;
  height: 1500px;
  /* 新增：脱离文档流，不会占用父容器空间导致父容器被撑开 */
  position: absolute;
  /* 以下为可选定位属性，可根据需求调整图片在header中的位置 */
  /* 示例：左上角对齐 */
  top: 0;
  left: 0;
  /* 如果要水平居中可以换成下面两行 */
  /* left: 50%;
  transform: translateX(-50%); */
}

原理说明 #

• 普通文档流中，行内元素、块级元素的大小都会被计入父容器的内容高度计算，所以高度1500px的img会把min-height仅为100vh的header撑开
• 给父容器设置position: relative后，子元素的绝对定位会以父容器的左上角为基准，而非整个页面视口
• 给img设置position: absolute后，元素脱离正常文档流，其宽高不再参与父容器的尺寸计算，自然就不会把header撑开，同时可以自由叠加在header上方
• 如果希望图片超出header高度的部分被裁剪，只需要给.headerContainer加overflow: hidden即可

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