Jquery 滚动时引导面板页脚和正文重叠

我在一个区域内使用引导面板，面板主体的溢出y是可滚动的。 所以当我滚动时，页脚和正文内容似乎是重叠的

    <section class="panel panel-featured">
      <header class="panel-heading">
        <div class="panel-actions"><a href="#" class="fa fa-caret-down"></a></div>
        <h2 class="panel-title">Test Data</h2>
      </header>
      <div class="panel-body custom-scroll" style="max-height: 332px;">

        <div class="col-md-12"> Testing div</div><div class="col-md-12"> Testing div</div>

        <div class="col-md-12"> Testing div</div><div class="col-md-12"> Testing div</div>
      </div>


      <footer class="panel-footer text-right">
        <button type="button" class="btn btn-primary">
          Hit Me
        </button>
      </footer>
    </section>

我尝试使用Z-index来解决这个问题。滚动面板主体时，有没有办法消除重叠

请帮忙。提前感谢。

如果您设置overflow-y:scroll，它似乎可以正常工作

设置溢出：滚动打开。面板主体自定义滚动类不是主体。

---

这里的问题是，一个额外的类从某个自定义文件应用到模式页脚，即

.modal-footer {
   margin-top: -5px;
}

---

这就是为什么会有重叠。

在您提供的codeply链接中工作正常，但我仍在弄清楚为什么它在我的本地应用程序中不起作用。您的CSS是什么样子的？