html - 为什么我的 box-shadow 不能在这些 flex children 上正确重叠？

Question

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

当我尝试通过 HTML 和 CSS 实现时:

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

*{
  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 设法获得像原始设计一样的阴影> 过滤器:阴影(0px 30px 10px rgba(0, 0, 0, 0.25));

#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 进行所有这些操作？这些 block 的顺序已经正确。但是，只要你有一个透明的#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>