修复了部分中元素重叠的问题

Question

我有三个部分：div 1 和 div 3 的高度至少为 100vh，div 2 的高度为 50vh。我想要一种效果，其中 div 1 和 div 3 内的框是固定的，当您滚动时，div 2 会在它们上方移动以创建良好的过渡。问题是 div 1 和 div 3 中的两个框位置相同（固定），导致它们重叠，所以我看不到两者。由于 div 2 只有 50vh，在某些时候 div 1 和 div 3 都是可见的，我希望在重叠期间显示两个框。我尝试根据位置调整 z-index，但由于两个框同时可见，因此此解决方案不起作用。

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

.div1{
  background-color:red;
}

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

.div3{
  background-color:blue;
  
  position:relative;
}

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

<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>

Answer 1

在父 div 上使用

clip-path

使固定元素仅在其父 div 内可见。

.div1,
.div3 {
  height: 200vh;
  clip-path: inset(0);
}

.div1 {
  background-color: red;
}

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

.div3 {
  background-color: blue;
  position: relative;
}

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

<section class="div1">
  <div class="box box1" style="background: lightblue">
    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"  style="background: pink">
    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>