z-index가 적용되지 않는다면...?

결론부터 말하자면 z-index는 position 속성 있을 때만 적용된다는 점!

 

<div>
	<button id="top">버튼</button>
</div>
<div id="mask">

</div>

 

화면 전체 마스킹을 할 경우에 position: absolute를 적용했다.

#top {
  z-index: 100;
  }
  
#mask {
  position: absoulte;
  top: 0;
  left: 0;
  z-index: 1;
 }

하지만 마스킹이 됐을 때 버튼은 마스킹 상단에 위치하고 싶어서 z-index를 설정했지만 마스킹 밑에서 올라올 생각을 하지 않는다.

 

해결책

#top {
  position: relative;
  z-index: 100;
  }
 

버튼에 position 속성만 주면 깔끔하게 해결된다!