Radial Box Shadow на Фиксированный элемент - PullRequest
Новая
       28

Radial Box Shadow на Фиксированный элемент

0 голосов
/ 05 сентября 2018

Я пытаюсь добавить вид "радиальной тени" в div. Я использую ::before псевдоэлемент и Z-индекс для достижения этого. См. Упрощенную скрипку здесь.

Проблема: хотя он работает нормально, когда позиция элемента является относительной или абсолютной, правило 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>

1 Ответ

0 голосов
/ 17 сентября 2018

просто поместите ваш statusBar в div со свойством position: fixed. И сделайте statusBar как положение: относительное. 

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

Надеюсь, это поможет.

...