17

我在相对定位的元素中有一个固定位置的元素，就我而言，该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/

4

1 回答 1

28

简而言之，是的，在定义position:fixed了父级的情况下，一个元素受其父级的 z-index 限制z-index。

很遗憾地通知您，但目前无法实现您想要的。获得所需效果的唯一方法是更改​​ HTML或从outer.

更改 HTML 选项

第一个选择是移出inner，outer看起来像这样。

HTML 修复的第二个选项是移到fade内部outer（甚至使用相同的 CSS）——这里的演示。

第三种选择是先放入fadeinside of outer，然后再放入innerinside of fade，但这需要您使用 rgba 颜色和不透明度——该演示可在此处找到。

更改 CSS 选项

使用当前的 HTML 最接近的方法是在此处outer删除 -Demo 的 z - index 。您会认为您可以简单地将每个元素的 z-index 增加 2，但这不起作用，因为子元素的 z-index 不能高于其父元素（如果设置了父元素的 z-index）。

解释

如果您考虑一下，fade并且outer处于同一水平。你想要做的是fade保持在同一水平，但也让它保持在上面的水平，这是不可能的。这就像试图同时在一座建筑物的两层楼上，这是不可能的。

尽管您需要的内容与本文没有直接关系，但 Philip Walton 在z-indexes 和 opacity 对它们的影响上创建了一篇很棒的帖子，这可能对其他查看此问题的人有用。

于 2013-11-07T18:21:13.900 回答