6

I was working on my code when I stumbled upon this fun fact:

z-index doesn't work for a fixed element and, therefore, fixed elements will always be in front.

Is there a way to place a non-fixed element in front of a fixed element?

Thanks. 

#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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
frosty
  • 2,559
  • 8
  • 37
  • 73

3 Answers3

8

Unless you're dealing with flex items or grid items, an element must be positioned for z-index to work.1

In other words, the position property must have a value other than static or z-index will be ignored.2

Your second div is not positioned. Here are two options:

  • add position: relative to #normal, or
  • give the positioned div a negative z-index value

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

See also: Basics of the CSS z-index property

1 Although z-index, as defined in CSS 2.1, applies only to positioned elements, CSS 3 allows z-index to work with grid items and flex items, even when position is static.

2 z-index property page at MDN

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

Use negative z-index for the fixed element.

<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;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Nuwan Chinthana
  • 135
  • 9
0

#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>
Rohit
  • 93
  • 1
  • 6