position: fixed z-index 是不是相对于其父级的 z-index？

Posted 2023-03-06

【中文标题】position: fixed z-index 是不是相对于其父级的 z-index？

【英文标题】：Is position: fixed z-index relative to its parent's z-index?position: fixed z-index 是否相对于其父级的 z-index？

【发布时间】：2013-11-19 10:56:33

【问题描述】：

我在相对定位元素中有一个固定位置元素，就我而言，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元素出现在fade元素的前面。

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

上述代码示例的小提琴：

http://jsfiddle.net/n2Kq5/

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

【问题讨论】：

可能与我不久前写的这些答案有关.. How to reverse the order of nested child elements 和 Z-index below text but above background 很确定其中任何一个都会有所帮助你..子元素不可能有比父元素更高的z-index - 正如我的回答中所解释的那样。

你的意思是like this?？

@Zeaklous 谢谢，但这并不完全符合它的需要，请参阅这个小提琴：jsfiddle.net/Lwj22 黑色背景/白色文本需要出现在淡入淡出之后，而白色背景需要出现出现在它的前面，你的例子意味着两者都出现在模态的前面。

感谢@JoshC 现在通读它们，不幸的是，看起来这个问题并没有简单的解决方案:(

【参考方案1】：

简而言之，是的，在定义了父级的z-index 的情况下，具有position:fixed 的元素受其父级的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 并不直观（就所有密集目的而言，它是相对于窗口而言的），但我想如果这就是规范的编写方式我'只需要处理它