Radial Box Shadow on Fixed element

Question

I'm trying to add kind of "radial box shadow" to a div. I use a ::before pseudo-element and Z-index to achieve it. See a simplified fiddle here.

Problem : while it works fine when the element's position is either relative or absolute, the z-index rule doesn't seem to apply when position is set to fixed.

Any idea how to make this work?

.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

just wrap your statusBar to a div with the property of position: fixed. And make statusBar as 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); 
}

Hope this helps.