z-index on absolute positioned element with fixed parent

Question

Why z-index property isn't working with element with position absolute, if this element has parent that has position fixed? I make simple example for this case

HTML:

<div id='q1'>
  <div id='q2'></div>  
</div>

CSS:

#q1 {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
  z-index: 0;
}

#q2 {
  position: absolute;
  top: 80%;
  border: 2px solid black;
  width: 100px;
  height: 30px;
  background-color: green;
  z-index: -1;
}

score 0 · Accepted Answer · answered Oct 25 '17 at 17:27

0

It can't be done like that because z-index is relative to the elements of same stack and in your case you want the z-index of child to be lower than that of parent.

By the way if you don't make #q2 a child of #q1, it will work like charm.

Hope this help

answered Oct 25 '17 at 17:27

Rajan Benipuri

1,772
1
9
21

score 0 · Answer 2 · answered Oct 25 '17 at 17:32

0

It has nothing to do with the position property, it's because q2 is nested inside q1

answered Oct 25 '17 at 17:32

ticktock

151
1
12

z-index on absolute positioned element with fixed parent

2 Answers2