绝对定位div的边缘底部工作在Chrome浏览器，但不是Safari或Firefox

我有一个网站，当你滚动到内容的底部时，“隐藏页脚”显示在主要内容下面。主要内容需要绝对定位（因为它是更大的“事物”的一部分），页脚需要负的z-索引和固定的位置才能产生正确的效果。绝对定位div的边缘底部工作在Chrome浏览器，但不是Safari或Firefox

事情是我让所有的东西在谷歌浏览器中都能很好地工作，但是在Safari或Firefox中，隐藏底部显示页脚的主要内容不起作用。是什么赋予了？

我试过了其他问题给出的答案（包括spacer div或各种包装div）。其中一些解决方案修复了查看页脚的能力，但是现在，所有这些解决方案都无法点击低折射率页脚中的链接，因为它们现在由顶部的透明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; 
    }

来源

2016-03-05 Zach Both

这里是用包装材料和隔离物的溶液。 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>

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

来源

2016-03-05 22:35:22 Bolo

绝对定位div的边缘底部工作在Chrome浏览器，但不是Safari或Firefox

回答

相关问题