两个div设置position:fixed重叠 如何让fixed2排在fixed1高度之后

position: fixed 定位的元素会完全脱离正常文档流，默认锚定视口原点位置。你给.fixed2设置fixed定位后没有指定垂直方向偏移量，它会默认对齐视口顶部，自然和设置了top: 0的.fixed1完全重叠。

完全可以将.fixed2放置在.fixed1的下方，根据你的业务场景选择对应方案即可：

• 固定高度场景：直接写死偏移值
  如果.fixed1高度是固定值（比如你示例中写的100vh），直接给.fixed2设置等值的top偏移即可，同时修正原代码中宽度单位误用的问题：

.fixed1 {
  position: fixed;
  top: 0;
  width: 100%; /* 原代码写100vh是视口高度单位，铺满宽度应使用100%/100vw */
  height: 100vh;
  background: blue;
}

.fixed2 {
  position: fixed;
  top: 100vh; /* 偏移值与fixed1高度一致，正好落在fixed1底部下方 */
  width: 100%;
  height: 100vh;
  background: red;
}

对应HTML可以去掉重复的内联样式，结构更清晰：

<div class="fixed1">fixed 1</div>
<div class="fixed2">fixed 2</div>

• 动态高度场景：联动高度值
  如果.fixed1的高度不是固定值，可以用两种方式实现联动：
  1. CSS变量统一管理：把固定高度值抽成CSS变量，两个元素共用，改一处即可全局生效

  :root {
    --fixed1-height: 80vh;
  }
  .fixed1 {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--fixed1-height);
    background: blue;
  }
  .fixed2 {
    position: fixed;
    top: var(--fixed1-height);
    width: 100%;
    height: 80vh;
    background: red;
  }
  

  2. JS动态计算：如果.fixed1高度由内容撑开、会动态变化，用JS获取实际渲染高度设置偏移即可

  const fixed1El = document.querySelector('.fixed1');
  const fixed2El = document.querySelector('.fixed2');
  // 初始化设置偏移
  const setFixed2Offset = () => {
    fixed2El.style.top = `${fixed1El.offsetHeight}px`;
  };
  setFixed2Offset();
  // 监听视口变化、fixed1内容变化时更新偏移
  window.addEventListener('resize', setFixed2Offset);
  

• 类样式和内联样式重复定义定位、宽高属性，样式优先级混乱
• 宽度错误使用100vh单位，导致元素宽度等于视口高度，无法横向铺满屏幕
• .fixed2设置fixed定位后未设置top偏移，默认对齐视口顶部导致重叠

当前重叠效果预览：

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