position:absolute设置的showcase区块遮挡其余内容，求无需重写样式的解决方案

问题根源 #

showcase 设置position: absolute后脱离常规文档流，浏览器计算后续元素的布局位置时不会预留它的占位空间，所以sec2 默认从页面顶部开始渲染，自然被z-index: 2的showcase 完全遮挡。仅给sec2 添加position: relative没有调整位置和层级，自然无法解决问题。

修复方案（无需修改原有showcase的absolute布局） #

方案1：纯CSS修复（适配固定高度的showcase） #

直接修改你现有.sec2的CSS规则即可：

.sec2 {
  position: relative;
  /* 添加上边距，值匹配showcase的最小高度100vh即可 */
  margin-top: 100vh;
  /* 按需调整层级，确保比showcase的z-index:2更高即可 */
  z-index: 3;
  /* 可按需添加内边距调整内容边距 */
  padding: 40px;
}

该方案适配你当前showcase固定为min-height: 100vh的场景，修改成本极低。

方案2：JS动态适配（适配高度可变的showcase） #

如果后续你会调整showcase的高度、或者做响应式适配担心高度变化，可在现有JS代码后追加以下逻辑，动态计算showcase的实际高度来设置sec2的上边距：

// 页面加载、窗口尺寸变化时自动同步sec2的上边距
function adjustSec2Position() {
  const showcase = document.querySelector('.showcase');
  const sec2 = document.querySelector('.sec2');
  sec2.style.marginTop = `${showcase.offsetHeight}px`;
}
window.addEventListener('load', adjustSec2Position);
window.addEventListener('resize', adjustSec2Position);

配合方案1的CSS规则使用即可，适配所有showcase高度变化的场景。

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