在固定位置元素上设置z-index使其落后于所有其他内容

Question

我希望我的.control-panels元素定位fixed。问题在于，当我这样做时.tracks重叠。我已经尝试调整.tracks和.control-panels的z-index，但它不起作用。我怎样才能让.control-panels留在其他内容之上。

HTML

<section ng-controller="ProjectController" id="project">
  <div class="work-station">
    <div class="control-panels">
      <div ng-repeat="track in project.tracks track by $index" class="control-panel">{{track.name}}</div>
    </div>
    <div class="tracks">
      <div ng-repeat="track in project.tracks track by $index" class="track">
        <div ng-repeat="i in getNumber(project_cells) track by $index" class="cell"></div>
      </div>
    </div>
  </div>
  <md-button class="md-fab md-primary add-track">
    <md-icon>circle</md-icon>
  </md-button>
</section>

CSS

#project {
    height: 100%;
    .work-station {
        height: 100%;
        display: flex;
        height: calc(100% - 20px);
        padding: 20px;
        padding-top: 0;
        overflow-x: auto;
        .control-panels {
            display: flex;
            flex-direction: column;
            flex-basis: 15%;
            min-width: 150px;
            .control-panel {
                min-height: $min-ws-row-height;
                flex-grow: 1;
                border: 1px solid $sublime-black;
                border-top: none;
                &:first-child {
                    border-top: 1px solid $sublime-black;
                }
            }
        }
        .tracks {
            height: 100%;
            display: flex;
            flex-direction: column;
            .track {
                min-height: $min-ws-row-height;
                flex-grow: 1;
                list-style-type: none;
                display: flex;
                flex-basis: 15%;
            }
            .track:first-child {
                border: 1px solid $codepen-grey;
            }
            .track:not(first-child) {
                border: 1px solid $codepen-grey;
                border-top: none;
            }
            .cell {
                min-width: 80px;
                background: $sublime-black;
                outline: 2px solid $codepen-grey;
            }
        }
    }
    .add-track {
        position: fixed;
        bottom: 30px;
        right: 30px;
    }
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.slide-in-left {
    animation-name: slideInLeft;
    animation-duration: 250ms;
    visibility: visible !important;
}