z-index 不适用于固定元素

Question

当我偶然发现这个有趣的事实时，我正在编写我的代码：

z-index 不适用于固定元素，因此，固定元素将始终在前面。

有没有办法将非固定元素放在固定元素前面？

谢谢。

#fixed {
  background-color: red;
  width: 500px;
  height: 500px;
  position: fixed;
  z-index: 0;
}
#normal {
  background-color: blue;
  width: 500px;
  height: 500px;
  z-index: 1;
}

<div id = 'fixed'> I'm Fixed </div>
<div id = 'normal'> I'm Normal </div>

Answer 1

除非您处理的是弹性项目或网格项目，否则必须对元素进行定位才能使 z-index 正常工作。¹

换句话说，position 属性必须有一个不同于 static 的值，否则 z-index 将被忽略。²

您的第二个 div 没有定位。这里有两个选项：

将position: relative添加到#normal，或
给定位的div一个负的z-index值

#fixed {
    background-color: red;
    width: 500px;
    height: 500px;
    position: fixed;
    z-index: 0;                   /* a negative value here will also work */
}
#normal {
    background-color: lightblue;      
    width: 500px;
    height: 500px;
    z-index: 1;
    position: relative;           /* new */
}

<div id = 'fixed'> I'm Fixed </div>
<div id = 'normal'> I'm Normal </div>

另请参阅：

¹ 尽管 z-index 定义在 CSS 2.1, applies only to positioned elements, CSS 3 allows z-index to work with grid items and flex items 中，即使 position 是 static.

² z-index property page at MDN

Answer 2

对固定元素使用负值z-index。

<div id = 'fixed'> I'm Fixed </div>
<div id = 'normal'> I'm Normal </div>

#fixed {
background-color: red;
width: 500px;
height: 500px;
position: fixed;
z-index: -1;
}
#normal {
background-color: blue;
width: 500px;
height: 500px;
z-index: 1;
}

Answer 3

#fixed {
  background-color: red;
  width: 500px;
  height: 500px;
  position: fixed;
  z-index: 0;
}
#normal {
  background-color: blue;
  width: 500px;
  height: 500px;
  z-index: 1;
position:relative;
}

<div id = 'fixed'> I'm Fixed </div>
<div id = 'normal'> I'm Normal </div>

#fixed {
  background-color: red;
  width: 500px;
  height: 500px;
  position: fixed;
  z-index: 0;
}
#normal {
  background-color: blue;
  width: 500px;
  height: 500px;
  z-index: 1;
position:relative;
}

<div id = 'fixed'> I'm Fixed </div>
<div id = 'normal'> I'm Normal </div>

z-index 不适用于固定元素

z-index not working for fixed element

html

css

fixed

z-index