需要固定的div不重疊父親的相對div

我正在嘗試使頁腳停留在/隱藏時，我將向上滾動。
想象2個格（第一和第二），一個在另一個之下：需要固定的div不重疊父親的相對div

<div id="first"> 
    <div class="footer" style="color:red"> 
    </div> 
</div> 
<div id="second"> 
    <div class="footer" style="color:green"> 
    </div> 
</div>

兩個頁腳是在固定位置，底部爲0，和#first和#second處於相對位置。當我向下滾動時，第一個頁腳在#second後面消失。但是當我向上滾動時，＃第二個頁腳不會在#first div後面消失。

插圖：Screen capture of my problem。
我需要綠色的被#first div隱藏（就像紅色的#second div一樣）。

body{ 
 
margin : 0px; 
 
} 
 
.parent{ 
 
    height : 500px; 
 
    width : 100%; 
 
    position:relative; 
 
} 
 
.footer{ 
 
    position:fixed; 
 
    bottom:0px; 
 
    left:0px; 
 
}

<div class="parent" style="background-color:red;"> 
 
    <div class="footer" style='color:yellow'> 
 
     <span>1</span> 
 
     <span>2</span> 
 
     <span>3</span> 
 
     <span>4</span> 
 
    </div> 
 
</div> 
 
<div class="parent" style="background-color:green;"> 
 
    <div class="footer" style='color:blue'> 
 
     <span>1</span> 
 
     <span>2</span> 
 
     <span>3</span> 
 
    </div> 
 
</div>

看數字4（黃色），這是disepear，它的偉大！我需要1，2和3在第一個div的父級時也是這樣做的。

來源

2016-03-22 MD'

嘗試在第一個和第二個 – LGSon

Yap @LGSon上設置「z-index：2」，已經嘗試這個，現在綠色正在工作，紅色不要 –

發佈一個最小的工作片段，以便我們看到它的外觀 – LGSon

我最終發現如何做到這一點，我使我的頁腳處於絕對位置，並使用jQuery在滾動時更改頂部屬性。但它只適用於Firefox。 Chrome不知道scrollTop：/

來源

2016-03-23 10:36:40

需要固定的div不重疊父親的相對div

回答

相關問題