Css html5中粘性页脚内容中的问题

我用html5和css创建了一个简单的网页

我已经创建了有4列的粘性页脚，每列都有垂直导航菜单

这是我的密码：

<footer>

<div id="footer">
<div class="footer-column" id="footer_column1">
Home
</div>
  <div class="footer-column" id="footer_column2"> 
about us 

</div>
  <div class="footer-column" id="footer_column3">
contact us
</div>
  <div class="footer-column" id="footer_column4">
Blogs  

</div>

</div>
</footer>

现在页面看起来像：s22.postimg.org/l0l6y85o1/Untitled_1_copy.png

如果我增加页脚的高度，它将成为幻灯片的隐藏背景

---

有谁能帮我解决这个问题吗。提前感谢。

您已经为页脚提供了绝对位置，所以它将保持在那里，现在您的页面基本上与页脚重叠。您应该为页面使用相对布局

我建议您为此使用引导。这里是一个简单的或简单的例子

关于z-索引-若你们给你们的页脚更高的z-索引，比如9999999，那个么它会比页面上的其他元素高

Z索引实际上不会帮助您定位。总会有东西被隐藏。若你们希望你们的页脚在页面底部，那个么不要使用绝对定位，它会被向下推

尝试：

---

听起来像是一个Z索引问题。最好发布一个小提琴或网站的测试链接，这将有助于解决这个问题！！谢谢@Paulie_D，但是现在，滑块的一半被隐藏了…如果我把position:relative放在页脚上，它会在幻灯片中显示，页脚放在上面。像这样，我谈论的是html的相对值。请检查示例，然后为整个html、css和JS创建一个提琴。4.很难从其他方面加以帮助。。使用JSFIDLE进行整个工作并不容易。所以现在我需要知道，如何增加页脚的高度？。。你能帮我一下吗？你的页脚就在底部。你现在还想要什么？检查它应该工作的代码。我已经编辑了答案。如果您还需要其他内容，请编辑您的问题。

  #footer {
   position:absolute;
   clear:both;
   bottom:0;
   color:#000;
   width:100%;
    height: 50px;
   background:#fff;
   left:0;

}
.footer-column {
  float: left; /* Push the div as far up-left as it can be put */
  width: 25%; /* Make sure to subtract the padding */
  padding: 10px; /* We want padding on all sides to make things look nice */
  text-align:center;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 100px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 100px;

}