z-index 정리

[JaeYeopHan]

Description

<div id="foo">
foo
</div>
<div id="bar">
bar
</div>

<styles>
#foo {
  z-index: 2;
}
#bar {
  position: fixed
}
<styles>

#foo의 z-index가 #bar보다 커도 적용이 되지 않는다. #bar가 position이 fixed(or absolute)이기 때문이다. 따라서 #foo에 position: relative를 적용해준다.

<styles>
#foo {
  position: relative
  z-index: 2;
}
#bar {
  position: fixed
}
<styles>