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

Posted 2023-03-06

【中文标题】绝对定位 div 的边距底部在 Chrome 中工作，但在 Safari 或 Firefox 中不可用

【英文标题】：Margin bottom on absolute positioned div working in Chrome but not Safari or 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;
  

【参考方案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>

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