html - 如何覆盖 "inherited"z 索引？

Question

我需要覆盖继承 z-indexes 的概念。

例如在这段代码中

<style>
div{
  background-color:white;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
</style>
<div style="position: fixed; z-index: 2;">
   div 1
   <div style="position: fixed; z-index: 3;">
     div 2
   </div>
 </div>
<div style="position: fixed; z-index: 2;">
 div 3
</div>

http://jsbin.com/epoqo3/3

我想要显示 div 2，但显示的是 div 3。如何在不更改结构的情况下更改此行为。

Answer 1

您不能为 child 提供比其 parent 更高的 z-index。如果是这种情况，您可能需要重新考虑您的设计，或者考虑暂时将子项从父项中弹出，以便在比其父项更高的索引上显示它。

在这种情况下，div 的物理顺序也有帮助。如果您将第一个移到最后一个之后，您将获得首选渲染。但这可能不适合您的情况。