z-index 不适用于固定位置

Question

我有类似以下的css：

#one{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
#two{
    position: relative;
    z-index: 9;
    width: 200px;
    height: 200px;
    background: red;
}
#link{
    position: relative;
    z-index: 9999999; /*this is not in higher layer why??? */
}

我无法#two按照我的设计增加 z-index 。

但是我已经为它分配了更高的 z-index#link但它没有进入更高的层。

那么，为什么固定的位置阻塞了层（z-index）？

提琴手

如果 #one 的位置没有固定，那么它会正常工作。所以，我的问题是为什么固定位置给了我一个错误？

Answer 1

为什么固定的位置挡住了层（z-index）？

这是因为堆栈上下文。CSS 定位和向z-index元素添加值会创建一个新的堆叠上下文。

从MDN 页面：

注意：堆叠上下文的层次结构是 HTML 元素层次结构的一个子集。

因此，在您的特定情况下：

<div id="one">
    <div id="overlay"></div>
</div>
<div id="two">
    <a href="#" id="link">test</a>
</div>

堆叠上下文的层次结构将是：

• 根
  • #one
  • #two
    • #link

并且无论它的价值有多少，#link都会被置于下。#onez-index

一种选择是增加元素的z-index值#two（超过#one）。