需要固定的 div 不要与父相对 div 重叠答案

【问题标题】：Need fixed div don't overlaps parent relative div需要固定的 div 不要与父相对 div 重叠
【发布时间】：2016-07-09 05:16:38
【问题描述】：

我正在尝试制作一个页脚，当我向上滚动时，它会留在后面/隐藏。
想象一下 2 个 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 后面消失。但是当我向上滚动时，#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（黄色），它消失了，很棒！当它在第一个 div 父级上时，我需要 1、2 和 3 做同样的事情。

【问题讨论】：

尝试在第一个设置z-index: 2，在第二个设置z-index: 1
Yap @LGSon，已经尝试过了，现在绿色正在工作，红色不起作用
发布一个最小的工作 sn-p 以便我们查看它的外观。
Invert CSS font-color depending on background-color的可能重复
我删除了我的答案并投票关闭了重复。使用欺骗链接的答案，您应该能够解决它。

标签： css footer fixed

【解决方案1】：

我终于找到了方法，我将页脚设置在绝对位置，并在滚动时使用 jQuery 更改顶部属性。但它只适用于 Firefox。 Chrome 不知道 scrollTop :/

【讨论】：