多区块内fixed定位元素重叠问题解决方案咨询

• 布局结构：3个section，div1/div3高度≥100vh，div2高度50vh
• 需求：div1/div3内的盒子使用fixed定位，滚动时div2从上方滑过形成过渡；当滚动到div2区域（div1和div3同时可见）时，两个fixed盒子需同时显示
• 当前问题：两个fixed盒子位置重叠无法同时显示；调整z-index无法解决两者同时可见时的显示问题

核心是通过滚动驱动动画控制两个fixed盒子的位置切换，结合父元素层级确保过渡阶段的显示效果。

修改后的CSS代码 #

.div1, .div3 {
  height: 200vh;
  position: relative;
}

.div1 {
  background-color: red;
  z-index: 2;
}

.div2 {
  background-color: green;
  position: relative;
  z-index: 10;
  height: 50vh;
}

.div3 {
  background-color: blue;
  z-index: 1;
}

.box {
  position: fixed;
  left: 50%;
  width: 50%;
  min-height: 65vh;
  max-width: 350px;
  background-color: black;
  color: white;
  padding: 30px;
  text-align: center;
  transform: translateX(-50%);
}

.box1 {
  top: 50%;
  transform: translate(-50%, -50%);
}

.box2 {
  top: 150%;
}

/* 滚动驱动动画实现盒子位置切换 */
@keyframes switchBoxes {
  to {
    .box1 { top: -50%; }
    .box2 { top: 50%; transform: translate(-50%, -50%); }
  }
}

.div3 {
  animation: switchBoxes linear forwards;
  animation-timeline: scroll(root);
  animation-range: entry 0% cover 50%;
}

保留原HTML结构 #

<section class="div1">
  <div class="box box1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae nunc ipsum. In hac habitasse platea dictumst. Cras felis tellus, malesuada sit amet elementum nec, egestas quis tellus. Duis eleifend laoreet ultrices. Nulla facilisi. Donec a purus tincidunt, mattis sem in, blandit elit. Nam tincidunt dignissim imperdiet. Quisque id dui massa. Nulla lacinia neque velit, sit amet varius risus vulputate nec. Vestibulum ultricies enim non placerat sollicitudin. Mauris commodo magna et ipsum fringilla, at placerat diam fringilla. Mauris bibendum mauris nisl, at tincidunt ex laoreet vitae. Donec luctus leo eget nulla tincidunt, quis laoreet leo cursus. Duis accumsan purus quis molestie malesuada. Cras gravida metus elit, vel auctor metus fringilla eget. Quisque gravida viverra urna, at efficitur felis ultricies dictum.
  </div>
</section>

<section class="div2"></section>

<section class="div3">
  <div class="box box2">
    Vestibulum mollis, nunc eget commodo dapibus, tortor ipsum mollis erat, sed porta diam neque sed justo. Donec imperdiet pharetra diam, nec tincidunt arcu varius et. Morbi elementum, ipsum quis malesuada lobortis, lorem nisl consequat sem, condimentum faucibus leo arcu sed orci. Nullam interdum neque nisi, at molestie purus semper ut. Nulla a purus porttitor, efficitur odio a, suscipit ipsum. In dapibus est neque, in congue mi tempor vitae. Sed at tempus risus. Phasellus bibendum auctor orci in condimentum. Sed eleifend quis justo et iaculis. Phasellus sagittis dolor vitae magna accumsan sodales. Fusce imperdiet massa id eros suscipit fringilla. Ut feugiat mollis lorem, et rutrum leo porta dapibus. Quisque interdum consectetur odio, vel placerat odio posuere vel. Phasellus in libero dignissim, tristique velit nec, varius justo. In eget auctor augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  </div>
</section>

效果说明 #

1. 初始状态：box1居中显示，box2在视口下方不可见
2. 滚动到div2区域：div2的最高层级覆盖两个盒子，形成滑过过渡效果
3. 滚动到div3区域：滚动驱动动画触发，box1移至视口上方，box2平滑移至视口居中
4. 过渡阶段（div1和div3同时可见）：两个盒子分别位于视口上下区域，实现同时显示的需求

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