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。

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

那么，为什么固定位置会阻挡层（z-index）？

jsfiddle

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

Answer 1

为什么固定位置会阻挡层（z-index）？

这是因为The stacking context。 CSS 定位并向元素添加 z-index 值会创建新的堆叠上下文。

来自MDN page：

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

因此在您的特定情况下：

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

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

• 根
  • #one
  • #two
    • #link

而#link 将被置于#one 之下，无论其z-index 的值是多少。

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

Answer 2

你想要链接悬停#two 吗？ 类似的东西？

#one{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#two{
    position: relative;
    z-index: 2;
    width: 200px;
    height: 200px;
    background: red;
}
#link{
    position: relative;
    z-index: 9999999;
}

http://jsfiddle.net/0q84xq87/1/

Answer 3

您需要将z-index 添加到包装器div

#two{
    position: relative;
    z-index: 9;
    width: 200px;
    height: 200px;
    background: red;
    z-index: 9999;
}
#link{
    position: relative;
}

Answer 4

因为#link 的z-index 是相对于#two 的（这是#link 的父级）z-index 那么#one 和#two 的z-index 是相对的给他们的父母（在这种情况下是body）。