html - 堆叠伪元素位置绝对/固定

Question

我有这个问题，我试图为网站上的所有 div 创建阴影，并试图对此保持聪明。一些 div 必须定位固定，另一些是绝对的。但是它们会很靠近，所以如果阴影不是真的在下面，它们就会重叠。

在这里看看它现在的样子：

如果你想玩，你可以在这里看到 codepen：https ://codepen.io/ifeltblankk/pen/vYXYmwv

所以所有的伪元素都是z-index -1，而div元素没有z-index。问题是固定元素在顶部有一个 z-index，并且它们的阴影在绝对 div 顶部溢出，除非您看到，如果它们位于 html (div 3) 之后。

你知道我如何才能使阴影全部低于任何位置的任何 div 吗？每页将有 20 个 div，所以我认为为每个页面创建副本是不可持续的。

div{
  text-align:center;
  font-size:15pt;
}

div:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 6vw 6vw black;
}

.absolute{
  height:14vh;
  width:32.5vw;
  top:5vh;
  left:22.5vw;
  position:absolute;
  background-color:lavender;

}

.absolute2{
  height:140vh;
  width:32.5vw;
  top:22vh;
  left:22.5vw;
  position:absolute;
  background-color:lavender;
  
}

.absolute3{
  height:40vh;
  width:37.5vw;
  top:30vh;
  right:5vw;
  position:absolute;
  background-color:lavender;
}

.fixed{
  height:20vh;
  width:38.5vw;
  top:5vh;
  right:5vw;
  left:auto;
  position:fixed;
  background-color:lavender;

}

.fixed2{
  height:40vh;
  width:16vw;
  top:5vh;
  left:5vw;
  position:fixed;
  background-color:lavender;

}

<div class="absolute">
(1) Absolute positionned div
</div>

<div class="fixed">
(2)  Fixed positionned div
</div>

<div class="absolute2">
 (3) Absolute positionned div 2
</div>

<div class="fixed2">
(4) Fixed positionned div
</div>

<div class="absolute3">
 (5) Absolute positionned div 3
</div>

标签： htmlcsscss-positionz-index