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

Posted 2023-03-21

【中文标题】需要固定的 div 不要与父相对 div 重叠

【英文标题】：Need fixed div don't overlaps parent relative 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的可能重复

我删除了我的答案并投票关闭了重复。使用欺骗链接的答案，您应该能够解决它。

【参考方案1】：

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