css - 具有固定元素的 z-index

Question

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

<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 页面的麻烦

Answer 1

简而言之，如果不改变你的标记，你就不能做你所追求的。"middle" 和 "bottom" 的 z-index 将生效，但 "top" 永远不会出现在 "middle" 的顶部。这是因为“middle”和“bottom”是兄弟元素——“top”作为一个子元素，不能胜过它的父元素的 z-index。

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