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位于中间。目前它正在出现（按从上到下的显示顺序）：中间，顶部，底部但我希望它显示顶部，中部，底部。

嵌套对于top div来说是很重要的，它可以将底部div作为父对象访问，而中间div可以独立于另外两个div。

我正在使用内联css来保持这个问题的限制和指导并省去组织css页面的麻烦

Answer 1

简而言之，在不改变标记的情况下，你不能做你想要的事情。 “中间”和“底部”的z指数将生效，但“顶部”将永远不会出现在“中间”之上。这是因为“中间”和“底部”是兄弟姐妹 - “顶部”，作为子元素，不能胜过它的父母的z指数。

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>

具有固定元素的z-index

2 个答案: