Bootstrap sidebar and footer not working properly

Question

I have to add a footer for many web pages developed using jQuery and bootstrap 3. I have written the following script based on this Bootstrap's example to do the job

// Default
$( document ).ready(function() {
        $('body').append('<footer class="footer">' + 
                               ' © 2015 ABC Company. All rights reserved. | Content for internal use only. | ' +
                               '<a href="mailto:#">Contact Us</a> ' +
                          ' </footer>');
});

related CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #99FFFF;
  padding-top:5px;
}

This work well for all pages except pages with sidebars where the sidebar overlaps the footer like below

I have tried to fix it by adding margin-bottom: 40px; /* Margin bottom by footer height */ margin-bottom: 40px; /* Margin bottom by footer height */ to .sidebar in CSS. Now it looks like below

Bootply

How to fix this? I can't add and style individual footer for each page as there are many pages.

Answer 1

在页脚的CSS中添加z-index：600，将使页脚位于所有内容的顶部。

Answer 2

You need to tell your footer to be displayed in front of other elements on the page. Using the z-index CSS property should help with this.