CODEWITHSUNDEEP
htmlcss
Martin Dawson
Martin Dawson

Reputation: 7656

z index fixed parent and child

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.

Upvotes: 0

Views: 1386

Answers (1)

Johannes
Johannes

Reputation: 67776

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/

Upvotes: 2

Related Questions