嘿，这个问题我碰到过好多次啦！本质上是CSS层叠上下文（stacking context）的问题——你的navbar元素层级比header的阴影更高，直接把阴影给挡住了。下面给你几个靠谱的解决思路：

1. 调整z-index层级（最常用方案） #

z-index只对非static定位的元素生效，所以先给header和navbar加上定位属性，再设置层级差：

.header {
  position: relative; /* 也可以用absolute/fixed，只要不是默认的static */
  z-index: 2; /* 给header设置更高的层级 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.navbar {
  position: relative;
  z-index: 1; /* 让navbar的层级低于header */
}

这样header的阴影就能“盖”在navbar上方了，完美解决遮挡问题。

2. 检查navbar的背景透明度 #

如果navbar设置了完全不透明的背景色（比如background-color: #fff），它会直接把下方的阴影挡住。你可以试试这两个小技巧：

• 给navbar加顶部内边距，让阴影能显示在空隙里：

  .navbar {
    padding-top: 8px;
    background-color: #fff;
  }
  

• 把navbar的背景改成半透明，让阴影透出来：

  .navbar {
    background-color: rgba(255,255,255,0.9);
  }
  

3. 增大阴影的显示范围 #

有时候不是被挡住，而是阴影的参数不够明显，看起来像是消失了。可以调整阴影的偏移量、模糊半径：

.header {
  box-shadow: 0 8px 12px rgba(0,0,0,0.15); /* 增大y轴偏移和模糊度，让阴影更突出 */
}

4. 排查父元素的层叠上下文 #

如果上面的方法都没用，要检查header或navbar的父元素有没有创建新的层叠上下文（比如设置了transform、opacity<1、position: fixed等属性）。这种情况下，子元素的z-index只在父容器内生效，需要调整父元素的层级，或者把header和navbar放到同一个层叠上下文里。

内容的提问来源于stack exchange，提问作者Paul