Question

我有一个包含relative和＆amp;的元素的div absolute z-index位置，包含和不包含{{1}}。

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

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

我无法弄清楚我可以设置什么定位或z-index，以便页脚永远不会被其他元素重叠，并始终显示在页面上的最低/最后。

你可以在这个小提琴中看到问题：http://jsfiddle.net/patmeeker/9drr6qhr/

（稍后其他元素的长度将动态变化。不确定这是否是一个问题，但小提琴还没有反映出来）

Answer 1

这是因为您将position: relative与top: 50px一起使用，这将使位置50px远离top，但在流程中，它的位置仍在top，但没有任何空格，例如top: 0，这导致您的footer没有任何top值内容div与类relNoZ重叠。

要解决此问题，您应该将top: 50px提供给footer以及任何其他同级容器（如果有）或从top: 50px

中删除.relNoZ

这是更新的Fiddle

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: