固定元素上的径向盒阴影

Question

我正在尝试为div添加一些“径向盒子阴影”。我使用::before伪元素和Z-index来实现它。 See a simplified fiddle here.

问题：当元素的位置是相对或绝对时，它工作正常，当位置设置为固定时，z-index规则似乎不适用。

知道如何使这项工作？

.statusBar {
  position: absolute;
  /*chnaging this to fixed will break the z-index*/
  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);
}

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

Answer 1

只需将statusBar包装到具有position：fixed属性的div中。并将statusBar作为position：relative。

 <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); 
}

希望这可以帮助。