javascript - 使用 z-index 获取页脚以显示 AFTER 元素

Question

我有一个 div 包含具有 relative 和 absolute 位置的元素，有和没有 z-index。

我需要另一个 div - 我的页脚，显示在所有其他可见元素之后。它应该从最低的其他元素的末尾下方开始。

在我的 html 代码中，页脚 div 确实出现在所有其他 div 之后。但出于某种原因，它总是呈现在其他人之下/重叠。

我不知道我可以设置什么定位或 z-index 来使页脚永远不会与其他元素重叠，并且始终在页面上显示最低/最后。

您可以在这个 fiddle 中看到问题:http://jsfiddle.net/patmeeker/9drr6qhr/

(稍后其他元素的长度将动态变化。不确定这是否是一个问题，但 fiddle 还没有反射(reflect)出来)

Answer 1

这是因为你正在使用 position: relative与 top: 50px ，这将呈现位置 50px离top更远，但在流程中，它的位置仍然在top没有任何空格，例如 top: 0 ，这会导致你的 footer没有任何 top与内容重叠的值 div与类 relNoZ .

要克服这个问题，您应该给出 top: 50px至 footer和任何其他同级容器(如果有)或删除 top: 50px来自 .relNoZ

这是更新的 Fiddle

#relNoZ{
    position: relative;
    top:50px;
    border: 1px solid red;
}

#absNoZ{
    position: absolute;
    top: 100px;
    left:240px;
}

#relWithZ{
    position: relative;
    left:70px;
    z-index:3;
}

#absWithZ{
    position: relative;
    left:370px;
    z-index:3;
}

#foot{
    position: relative;
    top:50px;
    border: 1px solid green;
}

<div id="relNoZ">
    <div id="absNoZ">
        absolute    
    </div>
    
    <div id="relWithZ">
        relative/z-index    
    </div>
    
    <div id="absWithZ">
        absolute/z-index      
    </div>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
</div>

<div id="foot">
    footer<br>
    footer<br>
    footer<br>
    footer<br>
    footer<br>
</div>