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

简而言之，是的，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 - Demo here的z-index。您可能会认为您可以简单地将每个元素的z-index递增2，但这不起作用，因为子元素不能具有比其父元素更高的z-index（如果设置了父元素的z-index）。

说明

如果您考虑一下，fade和outer处于同一级别。您要做的是让fade保持在同一级别，但也将其置于上一级，这是不可能的。就像试图同时在建筑物的两个楼层上一样，它无法完成。

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

位置：固定z-index相对于其父级的z-index？

1 个答案:

说明