固定元素上的径向框阴影

Question

我正在尝试将 "radial box shadow" 添加到 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 包装到 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); 
}

希望对您有所帮助。

固定元素上的径向框阴影

Radial Box Shadow on Fixed element

css

css-position

pseudo-element

box-shadow