css - 是位置 : fixed z-index relative to its parent's 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 的 CSS分区？

上述代码示例的 fiddle :

http://jsfiddle.net/n2Kq5/

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

Answer 1

简而言之，是的，具有 position:fixed 的元素受其父级的 z-index 限制，因为定义了父级的 z-index。

很遗憾地通知您，您想要的目前无法实现。获得所需效果的唯一方法是更改 HTML 或从 outer 中删除 z-index。

更改 HTML 选项

第一个选项是将 inner 移到 outer 之外，看起来是 like this .

修复 HTML 的第二个选项是将 fade 移到 outer 内部(甚至使用相同的 CSS)- demo of that here .

第三种选择是将 fade 放在 outer 内，然后将 inner 放在 fade 内, 但这需要您使用 rgba 颜色和不透明度 - that demo is found here .

更改 CSS 选项

使用与当前相同的 HTML，最接近的做法是删除 outer 的 z-index - Demo here .您会认为您可以简单地将每个元素的 z-index 增加 2，但由于子元素的 z-index 不能高于其父元素(如果设置了父元素的 z-index)这一事实，这是行不通的。

---

解释

如果你仔细想想，fade 和outer 是在同一层级的。您要做的是让 fade 保持在同一水平，但也让它在上面的水平，这是不可能的。这就像试图同时出现在建筑物的两层楼，这是不可能的。

虽然您需要的与本文没有直接关系，但 Philip Walton 在 z-indexes and the effect opacity has on them 上发表了一篇很棒的帖子，这可能对查看此问题的其他人有用。