父级上面的CSS Z-index子项和父项下的div

Question

Goodday，

我有2个div这样的设置

<div id="parent">
     <div id=child"><div>
</div>
<div id="underdiv"> </div>

CSS：

#parent { position: fixed; z-index: -1; width: 100%; height: 100%;  } 
#child { position: fixed; z-index: 10; width: 300px; height: 300px; }
#underdiv { position: relative; margin-top: 100%; z-index: 9;}

所以想要的是de #parent全屏，当我滚动underdiv来到父母。但这个孩子在整个下层是可见的。这可能吗？当我将#child放在#parent之外时，它可以工作，但这不是我想要的。

演示：http://dailycms.develop.tvtweb.nl/profielpagina.html

Answer 1

不幸的是，这是不可能的。 z-index仅在两个元素位于DOM树中的同一级别时才适用（即它们具有相同的父元素）。

您可以在this article中找到有关此内容的更多详细信息，尤其是文章中的堆叠上下文部分。

另外，这里有一个指向MDN's page on Stacking Context in z-index的链接，以获得更详细的解释。