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> 

另请参见： CSS z-index属性的基础知识

---

¹虽然CSS 2.1中定义的z-index仅适用于定位元素，但CSS 3允许z-index处理网格项和弹性项 ，即使position是static 。

MDN上的 ^2个 z-index属性页面

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>