在页脚上方浮动社交图标

Question

在网页的固定div元素方面，我需要一些关于如何最好地解决问题的指导。

ISSUE： 移动屏幕底部可以看到全宽水平固定社交图标，并在用户滚动页面时随身携带。当用户滚动并到达网页的末尾时，社交图标与页脚区域重叠。

理想目标： 期望的结果是在网页底部显示全宽水平固定社交图标，但是，希望图标在页脚之前停止而不与页面重叠。

示例：

我应该如何处理这似乎是一个常见的问题？谢谢:)

Answer 1

如果将padding-bottom添加到页脚等于固定元素的高度，则页脚将滚动到固定div上方的视图中。这与OP提出的顺序相反，但却是最简单的解决方案：

#container {
  height: 1000px;
  width: 100px;
  background: silver;
  position: relative;
}
#footer {
  height: 50px;
  width: 100%;
  padding-bottom: 50px;
  background: black;
  position: absolute;
  bottom: 0;
}
#fixed {
  height: 50px;
  width: 100px;
  position: fixed;
  bottom: 0;
  background: blue;
}

<div id="container">
  <div id="footer"></div>
</div>
<div id="fixed"></div>

Answer 2

您可以使用html中的<footer>并修改margin-top：30px;用css。这样，页脚不会与div，视频等重叠:) 你也可以在页脚里面使用hr，看起来会更好

<footer> <hr> &copy; this is footer <footer>