position: fixed z-index是否相对于其父z-index？

Question

我在一个相对定位的元素中有一个固定位置的元素，就我而言，position: relative元素不应该对position: fixed有任何影响(固定元素是相对于窗口定位的，对吧？)

然而，固定元素的z-index似乎被它的父元素继承，以至于它的z-index不能高于它的父元素的z-index。

我希望我说得有道理？下面是我正在讨论的HTML示例：

​

.outer { 
    position: relative; 
    z-index: 2; 
}
.inner { 
    background: #fff; 
    left: 50px; 
    position: fixed; 
    top: 40px; 
    z-index: 1000000; 
}

.fade { 
    background: #555; 
    bottom: 0; 
    left: 0; 
    opacity: 0.5; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 3; 
}

<div class="outer">
    <div class="inner">testing testing</div>
</div>
<div class="fade"></div>

​

如果您更改了以下内容：

.outer { position: relative; z-index: 4; }

然后.inner元素出现在淡入淡出元素的前面。

我觉得这种行为很奇怪...有没有办法在不移动.inner div或更改.outer div的CSS的情况下解决这个问题？

上述代码示例的乱七八糟：

http://jsfiddle.net/n2Kq5/

http://jsfiddle.net/U8Jem/1/

Answer 1

简而言之，如果定义了父元素的z-index，则带有position:fixed的元素将受到其父元素的z索引的限制。

很遗憾地通知你，你想要的目前还不可能实现。获得想要的效果的惟一方法是更改HTML语言或从outer中删除z索引。

更改HTML选项

第一个选项是将inner移到outer之外，这看起来像。

HTML修复的第二个选项是将fade移动到outer内部(甚至使用相同的CSS )- 。

第三种选择是将fade放入outer中，然后将inner放入fade中，但这需要使用rgba color和opacity - 。

更改CSS选项

使用与当前相同的超文本标记语言，您能得到的最接近的结果是删除outer - 的z索引。您可能认为可以简单地将每个元素的z-index递增2，但这不起作用，因为子元素的z-index不能高于其父元素的z-index (如果设置了父元素的z-index)。

解释

如果你仔细想想，fade和outer是在同一个水平上的。您要做的是让fade保持在相同的级别，同时又保持在更高的级别，这是不可能的。这就像试图同时在一栋建筑的两层楼里，这是不可能的。

虽然您需要的内容与本文没有直接关系，但是Philip Walton在z-indexes and the effect opacity has on them上创建了一篇很棒的文章，对其他正在研究这个问题的人来说可能会很有用。