具有固定元素的 z-index答案

【问题标题】：z-index with fixed elements具有固定元素的 z-index
【发布时间】：2013-03-02 03:11:27
【问题描述】：

我正在尝试正确显示页面上的元素。布局看起来像这样。

<div id='middle' style='position: fixed; z-index: 50;'></div>
<div id='bottom' style='position: fixed; z-index: 0;'>
<div id='top' style='position: fixed; z-index: 100;'></div>
</div>

所以我希望底部 div 位于底部并嵌套在其中的 div 将出现在顶部，相邻的 div 位于中间。目前它正在出现（按从上到下的显示顺序）：中间，顶部，底部，但我希望它显示顶部，中间，底部。

嵌套对于顶部 div 访问底部 div 作为父对象和中间 div 独立于其他两个对象非常重要。

我正在使用内联 css 来限制和直接解决这个问题，并省去组织 css 页面的麻烦

【问题讨论】：

那么你必须使用三个独立的div。目前#bottom 位于#middle 之下。 #top 是 #bottom 的子代，这意味着它也在 #middle 下（独立于其 z-index，因为它与下一个定位的父代相关。
即使他们使用固定定位？我认为固定是绝对的扩展，因此相对定位不会影响这种情况
这可能会澄清：stackoverflow.com/questions/1384604/…
不，固定是没有扩展。每个位置（静态除外）都遵循相同的规则。
我明白。谢谢你。我将研究另一个解决方案

标签： css html z-index fixed

【解决方案1】：

简而言之，如果不更改您的标记，您就无法做您想做的事。 "middle" 和 "bottom" 的 z-index 将生效，但 "top" 永远不会出现在 "middle" 的顶部。这是因为“middle”和“bottom”是同级元素——“top”作为子元素，不能超过其父元素的 z-index。

【讨论】：

我现在明白了。谢谢，我会想办法解决的。我认为可能有一个快速的解决方案，我在 html 方面缺乏专业知识可能被忽视了
我不知道你的手在标记方面有多束缚，但一个超级笨拙的解决方法是用 JS 操作 DOM。不过，我真的会尽量避免这种情况。

【解决方案2】：

试试这个：

<div id='middle' style='position: fixed; z-index: 50;width: 100px; height: 100px; background: red; top: 100px;'></div>

    <div id='bottom' style='position: fixed; z-index: 0; width: 100px; height: 100px; background: blue; bottom: 0px;'> 
        <div id='top' style='position: fixed; z-index: 100; width: 100px; height: 100px; background: green; top: 0px;'></div> 
    </div>

【讨论】：

这会产生与我之前相同的结果，添加颜色只是直观地显示了我的问题。不过谢谢你
确定吗？我的结果是顶部，中间，底部，而不是中间，顶部，底部
是的，您显示的是相对于 y 轴的顶部中间底部的对象。我正在寻找沿 z 轴的对象的重组。更像是分层而不是定位。感谢您的帮助