Html z索引不适用于固定元素

我正在编写代码，突然发现了一个有趣的事实：

z-index

不适用于固定元素，因此，固定元素将始终位于前面

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

谢谢

#已修复{
背景色：红色；
宽度：500px；
高度：500px；
位置：固定；
z指数：0；
}
#正常的{
背景颜色：蓝色；
宽度：500px；
高度：500px；
z指数：1；
}

我修好了
我是普通的

除非您处理的是弹性项或网格项，否则必须定位一个元素才能使

z-index

起作用。1

换句话说，

position

属性必须具有除

static

或

z-index

以外的值。2

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

• 将

  位置：相对

  添加到

  正常

  ，或
• 给定位的div一个负值

  z-index

  值

#已修复{
背景色：红色；
宽度：500px；
高度：500px；
位置：固定；
z-index:0；/*此处的负值也适用*/
}
#正常的{
背景颜色：浅蓝色；
宽度：500px；
高度：500px；
z指数：1；
位置：相对；/*新*/
}

我修好了
我是正常的

对固定元素使用负的

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;
}

我修好了
我很正常
#固定的{
背景色：红色；
宽度：500px；
高度：500px；
位置：固定；
z指数：-1；
}
#正常的{
背景颜色：蓝色；
宽度：500px；
高度：500px；
z指数：1；
}

#已修复{
背景色：红色；
宽度：500px；
高度：500px；
位置：固定；
z指数：0；
}
#正常的{
背景颜色：蓝色；
宽度：500px；
高度：500px；
z指数：1；
位置：相对位置；
}

我修好了
我很正常