固定元素上的径向框阴影答案

【问题标题】：Radial Box Shadow on Fixed element固定元素上的径向框阴影
【发布时间】：2018-09-05 16:52:46
【问题描述】：

我正在尝试向 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>

【问题讨论】：

标签： css css-position pseudo-element box-shadow

【解决方案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); 
}

希望这会有所帮助。

【讨论】：