为什么我的第二个div会隐藏在首屏.front-page div的后方？

你遇到的遮挡问题根源是.front-page设置了position: absolute，绝对定位元素会脱离正常文档流，不会在页面中占据实际物理空间，因此后续的.scrolling元素会默认从页面顶部（坐标0位置）开始渲染，又因为.front-page设置了更高的z-index:7，所以.scrolling会被完全遮挡。

不需要手动调整偏移定位，直接修改.front-page的样式实现全屏首屏，同时保留正常文档流排布即可：

1. 首先添加全局样式重置，消除浏览器默认边距，保证视口高度计算准确：

html, body {
  margin: 0;
  padding: 0;
  /* 兼容vh支持不好的旧设备可以保留这行height配置 */
  height: 100%;
}

2. 修改.front-page的样式，删除绝对定位和层级配置，用100vh实现占满整个视口高度：

.front-page {
  background-color: lightseagreen;
  width: 100%;
  /* 100vh代表当前视口的100%高度 */
  height: 100vh;
  display: block;
}

修改完成后.front-page会保留在正常文档流中，占满首屏高度，下方的.scrolling元素会自然排在它的下方，滚动时就能正常显示。

如果你的业务场景确实需要保留.front-page的绝对定位配置，也可以给下方的.scrolling元素添加与视口高度相等的上外边距：

.scrolling {
  display: flex;
  margin-top: 100vh;
}

该方案兼容性与灵活性不如第一种，非必要不推荐使用。

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