固定DIV不服从z-index

Question

我们的屏幕看起来类似于以下内容：

----------------------------
| Fixed Nav     | Fixed    |
----------------| side bar |
| App content   | with     |
|               | icons    |
----------------------------

当用户选择右侧的图标时，侧面板会从右向左滚动，其中包含额外的详细信息。

但是，我们遇到的问题是，当侧面内容栏滚动到屏幕上时，它会覆盖Fixed sidebar with icons。 icons本身位于side content bar之上，但基本栏位于下方。

＆＃13;

＆＃13;

.application-container {
  height: 700px;
  width: 100%;
  background-color: red;
}

.top-nav-container {
  height: 30px;
  position: fixed;
  top: 0px;
  bottom: auto;
  left: 0px;
  z-index: 1030;
  background-color: lightblue;
  width: 100%;
}

.top-nav-spacer {
  height: 30px;
}

.portal-content {
  height: calc(100% - 30px);
}

.portal-view {
  height: 100%;
}

.app-content {
  height: 100%;
  width: calc(100% - 46px);
  background-color: aqua;
}

.nav-side-bar {
  background-color: #f0f0f0;
  width: 46px;
  position: fixed;
  right: 0px;
  top: 30px;
  overflow: hidden;
  height: 100%;
  z-index: 30;
}

.side-bar-container {
  overflow: hidden;
  height: 100%;
  position: fixed;
  z-index: 99;
}

.side-bar-icon-container {
  z-index: 99;
  position: relative;
  right: 0px;
  background-color:brown;
}

.side-bar-content {
  right: -500px;
  
  width: 500px;
  position: fixed;
  height: calc(100% - 63px);
  top: 0px;
  background: #ccc;
  overflow: auto;
  z-index: -1;
  opacity: 0.99;
  
  -webkit-transition: right 1s;
  -moz-transition: right 1s;
  -o-transition: right 1s;
  transition: right 1s;
}

.side-bar-icon-container:hover + .side-bar-content {
  right: 46px;
}

＆＃13;

<div class="application-container">
  <div class="portal-nav">
    <div class="top-nav-container">Nav items</div>
    <div class="top-nav-spacer"></div>
  </div>
  <div class="portal-content">
    <div class="portal-view">
      <section class="app-content">
        App content
      </section>
      <section class="nav-side-bar">
        <div class="side-bar-container">
          <div class="side-bar-icon-container">
            <ul>
              <li>Icon 1</li>
              <li>Icon 2</li>
            </ul>
            Hover over this area for the slide in
          </div>
          <div class="side-bar-content">
            Content to slide in
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

固定的导航项与z-index值相关联，但滑动div似乎没有遵守已设置的所有z-index值。

如何让侧栏显示在fixed side bar后面？