为什么我的 box-shadow 在这些 flex children 上没有正确重叠？

Question

所以基本上页面的设计应该是这样的：

当我尝试通过 HTML 和 CSS 实施时：

如您所见，导航栏的框阴影与 header 重叠。

*{
  margin: 0;
}
#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;
}

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

我尝试添加z-index和定位元素，但似乎没有用。有什么解决办法吗？

这是 CodePen 中的问题：https://codepen.io/biljx/pen/rNzwwqd

编辑：我无法解决 z-index 问题，但通过使用 drop-shadow 而不是 box-shadown [=17] 设法获得像原始设计一样的阴影=]

#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);*/
  filter: drop-shadow(0px 30px 10px rgba(0, 0, 0, 0.25) ); 
  z-index: 0;
}

Answer 1

我不明白为什么要对 z-index 进行所有这些操作？这些块的顺序已经正确。但是，只要你有一个透明的 #header，#main-nav 的影子就会可见。所以只需为 #header:

添加背景颜色

* {
  margin: 0;
}

#main-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

.main-container-right {
  position: relative;
  width: 100%;
  height: 800px;
}

#main-nav {
  position: sticky;
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 800px;
  border: 1px solid #c4c4c4;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 10px 10px #0004;
}

#header {
  position: sticky;
  display: flex;
  height: 30px;
  width: 100%;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 4px #0004;
}

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

为什么我的 box-shadow 在这些 flex children 上没有正确重叠？

Why doesn't my box-shadow overlap correctly on these flex children?

html

css

z-index

flexbox