title: Bootstrap panel footer and body overlap when scroll
body: <p>I am using <code>Bootstrap</code> panel inside a section and the <code>overflow-y</code> of panel body is <code>scrollable</code>.
  So when I am scrolling, the footer and body content seems to be overlapped.</p>
  
  <pre><code>    &lt;section class="panel panel-featured"&gt;
        &lt;header class="panel-heading"&gt;
          &lt;div class="panel-actions"&gt;&lt;a href="#" class="fa fa-caret-down"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;h2 class="panel-title"&gt;Test Data&lt;/h2&gt;
        &lt;/header&gt;
        &lt;div class="panel-body custom-scroll" style="max-height: 332px;"&gt;
  
          &lt;div class="col-md-12"&gt; Testing div&lt;/div&gt;&lt;div class="col-md-12"&gt; Testing div&lt;/div&gt;
  
          &lt;div class="col-md-12"&gt; Testing div&lt;/div&gt;&lt;div class="col-md-12"&gt; Testing div&lt;/div&gt;
        &lt;/div&gt;
  
  
        &lt;footer class="panel-footer text-right"&gt;
          &lt;button type="button" class="btn btn-primary"&gt;
            Hit Me
          &lt;/button&gt;
        &lt;/footer&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/bnWAd.png" alt="enter image description here"></p>
  
  <p>I tried using <code>Z-index</code> to resolved this. Is there any way to remove this overlap when scrolling the panel body ?</p>
  
  <p>Please help. Thanks in advance.</p>