位置:固定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元素出现在淡入淡出元素的前面.

我发现这种行为非常奇怪...有没有办法在不移动.innerdiv或改变div的CSS的情况下解决这个问题.outer？

以上代码示例的小提琴:

http://jsfiddle.net/n2Kq5/

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

Answer 1

简而言之,是的,在position:fixed给定父元素定义的情况下,元素受其父元素的z-index限制z-index.

很遗憾地通知你,但你想要的东西目前是不可能的.您可以获得所需效果的唯一方法是更改HTML或从中删除z-indexouter.

更改HTML选项

第一个选项是将inner外部的outer,这看起来是这样.

对于HTML修复第二个选项是移动fade的内部outer(甚至使用相同的CSS) - 的那演示这里.

第三个选项是放入fade内部,outer然后放入inner内部fade,但这需要你使用rgba颜色和不透明度 - 这个演示在这里找到.

更改CSS选项

使用当前相同的HTML,您可以获得的最接近的事情是删除z-index of outer- Demo here.您可能会认为您可以简单地将每个元素的z-index递增2,但这不起作用,因为子元素不能具有比其父元素更高的z-index(如果设置了父元素的z-index).

说明

如果你考虑一下,fade并且outer处于同一水平.你要做的就是fade保持同一水平,但也要保持在上面的水平,这是不可能的.这就像试图同时在建筑物的两个楼层,它无法完成.

虽然你需要的东西与这篇文章没有直接关系,但是菲利普沃尔顿创建了一篇关于z-index和opacity对它们的影响的精彩帖子,这对于看这个问题的其他人来说可能是有用的.