Question

我正在尝试创建一个包含固定标题，固定侧边栏和粘性页脚的示例页面。我希望页面也能响应。

我有一个固定的侧边栏，我有一个右边框。我希望边框和侧边栏在页脚开始时停止。

我有一个工作小提琴：https://jsfiddle.net/DTcHh/15278/

这是我用于侧栏的css

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background-color: #FFFFFF;
  margin-top: 50px;
  border-right: 1px solid red
}

Answer 1

使用z-index

.footer {
  z-index: 1000;
}

这是一个有效的fork

Answer 2

您可以使用z-index，因此页脚位于侧边栏的顶部。

<强> CSS

.footer {
  z-index:1000;
} 

#sidebar-wrapper {
  z-index: 10;
}

这里是working demo。

Answer 3

最简单的方法是使页脚position: fixed;的{{1}}高于侧边栏

小提琴：https://jsfiddle.net/ue49tzet/

如何阻止固定侧边栏在页脚顶部？

3 个答案: