堆叠视频控件和div：悬停元素？

Question

我正在尝试将视频控件显示在我的div容器之上，用于另一个面板。

控制面板具有以下CSS：

.panel-container{
    position: absolute;
    bottom: 0;
    height: 140px;
    left: 0;
    right: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    font-weight: 100;
    color: white;
    opacity: 0;
    &:hover {
      @include transition-delay(0s, 0s);
      opacity: 1;
    }
}

视频控件具有以下CSS：

.mejs-controls {
    z-index: 100;
  }

但无论z-index如何，视频控件都不可点击。 如何使视频控件显示在面板容器的顶部（并且面板容器需要位于视频本身之上）。