绝对定位 div 的边距底部在 Chrome 中工作，但在 Safari 或 Firefox 中不可用答案

【问题标题】：Margin bottom on absolute positioned div working in Chrome but not Safari or Firefox绝对定位 div 的边距底部在 Chrome 中工作，但在 Safari 或 Firefox 中不可用
【发布时间】：2016-06-19 14:19:09
【问题描述】：

我有一个网站，当您滚动到内容底部时，会在主要内容下方显示“隐藏页脚”。主要内容需要绝对定位（因为它是更大“事物”的一部分），页脚需要负 z-index 和固定位置才能产生正确的效果。

问题是我在谷歌浏览器中让一切都能完美运行，但是主要内容的底部边距显示页脚在 Safari 或 Firefox 中不起作用。是什么赋予了？

我已经尝试了其他问题中给出的答案（包括间隔 div 或各种包装 div）。其中一些解决方案修复了查看页脚的功能，但现在所有解决方案都取消了点击低 z-index 页脚中链接的功能，因为它们现在被顶部的透明 div“覆盖”。

这是一个显示功能（如果您在 Chrome 中打开）和问题（如果您在 Safari 或 Firefox 中打开）的 JSFiddle：https://jsfiddle.net/3npkmy6f/3/

任何帮助将不胜感激。

HTML：

<div class="main" style=""></div>
<div class="hidden-footer">
  <a href="http://google.com">THIS IS A LINK</a>
</div>

CSS：

.main {
  height: 200%;
  position: absolute;
  width: 100%;
  background-image: url("http://lorempixel.com/600/300/sports/1/");
  margin-bottom: 400px;
 }

 a {
  color: red;
  margin-top: 200px;
  left: 50%;
  display: block;
  text-align: center;
  font-size: 50px;
  margin-left: -25px;
 }

 .hidden-footer {
   width: 100%;
   background-image: url("http://lorempixel.com/400/200/");
   height: 400px;
   position: fixed;
   bottom: 0px;
   z-index: -2;
   display: block;
  }

【问题讨论】：

标签： html css google-chrome firefox safari

【解决方案1】：

这是一个带有包装器和间隔器的解决方案。 https://jsfiddle.net/Boloeng/3npkmy6f/11/

<div class="wrapper">
  <div class="main" style="">

  </div>
</div>
<div class="spacer">

</div>
<div class="hidden-footer">
  <a href="http://google.com">THIS IS A LINK</a>
</div>

但是，绝对元素的下边距可能未指定（这将解释不同的行为）。所以我会避免这种方法。

【讨论】：