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-indexpositionstatic

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