絕對定位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

回答

相關問題