Css 固定元素上的径向盒阴影

我试图给一个div添加一种“径向盒阴影”。 我使用一个

：：before

伪元素和Z-index来实现它。

问题：当元素的位置是相对的或绝对的时，z索引规则可以正常工作，但当位置设置为固定时，z索引规则似乎不适用

你知道怎么做吗

.statusBar{
位置：绝对位置；
/*将此更改为“修复”将破坏z索引*/
背景:#fcfc；
宽度：90%；
高度：80px；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
填充：0px 20px；
框大小：边框框；
边框：0.5px纯灰；
}
.statusBar:：之前{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：96%；
排名：0；
高度：10px；
左：2%；
边界半径：100px/5px；
盒影：0.18像素rgba（0,0,0,0.6）；
}

一些
内容

只需将状态栏包装成一个div，属性为position:fixed。并将状态栏设置为位置：相对

 <div class="container">
   <div class="statusBar">
     <span>Some</span>
     <span>content</span>
   </div>
 </div>


.container{
  position: fixed;
  width: 100%;
}
.statusBar {   
    position: relative; /*chnaging this to fix will */
    background: #FCFCFC; 
    width: 90%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
    border: 0.5px solid grey;
}

.statusBar::before {
  content: ""; 
  position:absolute; 
  z-index: -1; 
  width:96%;  
  top: 0; 
  height: 10px; 
  left: 2%; 
  border-radius: 100px / 5px; 
  box-shadow:0 0 18px rgba(0,0,0,0.6); 
}

一些
内容
.集装箱{
位置：固定；
宽度：100%；
}
.statusBar{
位置：相对；/*将此更改为修复将*/
背景:#fcfc；
宽度：90%；
高度：80px；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
填充：0px 20px；
框大小：边框框；
边框：0.5px纯灰；
}
.statusBar:：之前{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：96%；
排名：0；
高度：10px；
左：2%；
边界半径：100px/5px；
盒影：0.18像素rgba（0,0,0,0.6）；
}

希望这有帮助