flex布局子元素box-shadow重叠异常，导航栏阴影遮挡头部如何解决？

问题现象 #

页面预期设计效果：

基于HTML和CSS实现后的实际效果：

可以看到导航栏（Navbar）的box-shadow遮挡了头部（header）区域，尝试手动调整z-index、修改定位属性后均未生效。

原有代码 #

CSS代码 #

*{
  margin: 0;
}
/* 注：此处原有background属性多写了一个#，已修正 */
#main-container {
  display: flex;
  background-color: #f3f3f3;
  width: 100%;
  height: 100%;
}
.main-container-right {
  width: 100%;
  height: 800px;
  position: relative;
}

#main-nav {
  width: 100px;
  height: 800px;
  background-color: #f3f3f3;
  position: sticky;
  display: flex;
  flex-direction: column;
  border: 1px solid #c4c4c4;
  box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.25);
  z-index: 0;
}
#header {
  display: flex;
  height: 30px;
  width: 100%;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
  position: sticky;
}

HTML代码 #

<div id="main-container">
  <nav id="main-nav">
  </nav>
  <div class="main-container-right">
    <header id="header">
    </header>
  </div>
</div>

修复方案 #

方案1：调整父级堆叠层级（根源修复） #

该问题本质是堆叠上下文的层级规则导致：#main-nav和main-container-right是同级兄弟元素，header作为main-container-right的子元素，设置的z-index仅在父元素内部的堆叠上下文生效，无法覆盖父级同级元素的层级。
只需给右侧容器添加高于导航栏的z-index即可解决：

.main-container-right {
  width: 100%;
  height: 800px;
  position: relative;
  z-index: 1; /* 新增该行 */
}

方案2：替换阴影属性（已验证可用） #

无需调整层级，直接将导航栏的box-shadow替换为filter: drop-shadow，即可实现符合设计要求的阴影效果，不会遮挡头部区域：

#main-nav {
  width: 100px;
  height: 800px;
  background-color: #f3f3f3;
  position: sticky;
  display: flex;
  flex-direction: column;
  border: 1px solid #c4c4c4;
  /* 注释原有box-shadow */
  /*box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.25);*/
  filter: drop-shadow(0px 30px 10px rgba(0, 0, 0, 0.25)); 
  z-index: 0;
}

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