z index fixed parent and child

Question

I want gui to be on top of poster. Both elements must have fixed positions. It works fine if I set gui position to absolute but fixed doesn't work.

#gui {
  width: 250px;
  height: 50px;
  position: fixed; // If I change to absolute then it works.
  background-color: green;
}

#poster {
  width: 250px;
  height: 250px;
  position: fixed;
  background-color: red;
  z-index: -1;
}

<div id='gui'>
  <div id='poster'></div>
</div>

https://jsfiddle.net/pfpj03f5/

Why isn't this working? Setting z-index to positive numbers on #gui doesn't work either.

possible Duplicate http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug — Ivin Raj, Feb 10 '17 at 12:10

score 2 · Accepted Answer · answered Feb 10 '17 at 12:01

2

Because poster is a child element of gui.

Fixed position makes them independent of parent elements anyway, so just move poster out of gui and it works:

<div id='gui'></div>
<div id='poster'></div>

https://jsfiddle.net/eaaz8o2z/

answered Feb 10 '17 at 12:01

Johannes

64,305
18
73
130

z index fixed parent and child

1 Answers1