Question

我有一个网站，滚动到内容的底部a＆＃34;隐藏的页脚＆＃34;在主要内容下面显示。主要内容需要绝对定位（因为它是更大的事物的一部分＆＃34;）并且页脚需要负z-索引和固定位置才能产生正确的效果。

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

我已尝试过在其他问题中给出的答案（包括spacer div或各种包装div）。其中一些解决方案确定了查看页脚的能力，但是现在所有这些解决方案都删除了点击低z-index页脚中链接的功能，因为它们现在已经被覆盖了＃34;通过顶部的透明div。

这是一个JSFiddle，它显示了功能（如果你在Chrome中打开）和问题（如果你在Safari或Firefox中打开）：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;
  }

Answer 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>

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

绝对定位div的保证金底部在Chrome中工作，但不适用于Safari或Firefox

1 个答案: