z-index 동작 방식에 대해 설명해주세요

내용 정리

• z-index를 이해하기 위해서는 쌓임 맥락(stacking context)을 이해할 필요가 있는데, 쌓임 맥락은 3차원 z축에서 쌓이는 맥락을 의미하고, 각각의 HTML 요소는 자신의 속성에 따른 우선순위에 맞게 쌓이게 됩니다. 쌓임 맥락은 여러 조건에서 생기지만 일반적으로 absolute나 relative, fixed이고, z-index가 auto가 아닌 요소일 때 고려하게 됩니다.

꼬리 질문

• 부모 안에 자식 요소에 독립적으로 부모와 다른 z-index를 부여할 수 있나요?
• 작업하시면서 z-index 사용함에 있어서 까다로움을 느끼신 적이 있으실까요?

참고자료

• https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context