html - 与页脚重叠的位置固定 div(或侧边栏)

Question

问题:当您固定某个 div 的位置(通常用作边栏或侧边菜单之类的东西)时，如果您继续向下滚动，div 会与页脚重叠。

body {
  margin: 0;
}
#header {
  width: 100%;
  height: 290px;
  background-color: #07CB6F;
}
#body {
  width: 100%;
  height: 3450px;
  background-color: #2FA3F7;
}
#body_inner {
  width: 1280px;
  height: 3450px;
  margin: 0 auto;
}
#side_menu {
  width: 220px;
  height: 270px;
  position: fixed;
  background-color: #ffffff;
}
#footer {
  width: 100%;
  height: 200px;
  background-color: #FF00AB;
}

<div id="header">
</div>
<div id="body">
  <div id="body_inner">
    <div id="side_menu"></div>
  </div>
</div>
<div id="footer">
</div>

这次我没有使用任何jquery。通过上面给出的代码，由于#side_menu设置为height: 270px，重叠似乎没问题，但是，如果您这样做，它仍然会与页脚重叠放大浏览器(有时取决于浏览器和计算机的类型)。

我想知道为什么会发生，以及如何解决(或预防)。

提前致谢:)

Answer 1

这里有一个 fiddle 的解决方案

https://jsfiddle.net/stc0ogy2/1/

您需要开始使用 z-index，它的工作方式与 photoshop 图层类似，但如果没有 position，z-index 将无法工作> 所以你必须添加一个位置，如绝对、相对等。

更新

正如@AndreiGheorghiu 提到的，您应该使用一些 javascript 以获得更好的解决方案，从 list 中选择一个库。他给了你。

更新 2

我找到了这个易于使用的库，我相信它可以帮助您使用固定的侧边菜单，它叫做 tether .希望对您有所帮助。