当一个div在另一个div前面时如何遮罩

Question

我希望div成为另一个移动div背景的固定部分。 因此，假设网站的上半部分是白色div。下半部分是一个蓝色的div，上面有红色的圆圈。 当用户滚动时，蓝色div将在白色div上方滚动。红色圆圈的位置=固定，并且随机放置在页面上。我希望它们仅显示在蓝色div上，因此白色div必须隐藏它们。

我尝试使用z-indices进行此操作，但无法一次完成所有重叠操作。 基本上，红色圆圈必须同时位于白色div的后面和蓝色div的前面，但是蓝色div也必须同时位于白色div的前面。 我查看了片段，但只想出了如何将红色圆圈相对于其自身放置到一个位置。不要剪切屏幕的某个区域，以便当它们移入该区域时它们会被遮盖。同样不确定当用户滚动时如何使剪辑与白色div一起移出页面。

Answer 1

如果红色圆圈只是红色圆圈，则可以考虑使用background-attachment:fixed

.top{
 background:url(https://picsum.photos/id/10/800/600) center/cover;
 height:200px;
}
.bottom{
 /* Random circles*/
 background-image:
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%);
 background-position:
  10px 10px,
  10px 150px,
  200px 10px,
  200px 300px,
  300px 80px;
 background-size:40px 40px;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-color:rgba(0,0,255,0.5);
 height:400px;
 margin-top:-50px; /* To create a small overalp with top*/
}

<div class="top">

</div>
<div class="bottom">

</div>

Answer 2

由于蓝色div滚动带有白色，因此您可以使蓝色div位置绝对。在div之下，它仍然会滚动。通过使用两个posiion元素，您可以通过将蓝色div的z-index设置为-2，将红色圆圈的z-index设置为-1来使z-indexs有效。

html, body, .container{
  height: 100%;
  width: 100%;
  margin: 0;
}
.top, .bottom{
  height: 100%;
  width: 100%;
  z-index: 0;
}
.top{
  background: white;
  .content{
    margin: 5%;
    color: red;
  }
}
.bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: blue;
  z-index: -2;
  .content{
    margin: 5px;
  }
}
.circle{
  position: fixed;
  height: 50px;
  width: 50px;
  background: red;
  border-radius: 50%;
  z-index: -1;
}

.c-1{
  left : 25%;
  top : 25%;
}

.c-2{
  left : 60%;
  top : 40%;
}

.c-3{
  left : 10%;
  top : 78%;
}

<div class="container">
  <div class="top">
    <div class="content">
      <h1>some text</h1>
    </div>
  </div>
  <div class="bottom">
    <div class="circle c-1"></div>
    <div class="circle c-2"></div>
    <div class="circle c-3"></div>
    <div class="bg">
     <div class="content">
       <p> some text </p>
      </div>
    </div>
  </div>
</div>