stacking context

TL;DR기본적으로 요소들은 DOM 순서에 따라 쌓인다.positioned(position ≠ static) 요소는 non-positioned(position = static) 요소보다 위에 쌓인다.positioned 요소들 중 z-index 값이 높을수록 위에 쌓인다.새로운 쌓임 맥락이 생성되면 자식 요소는 해당 맥락 안에서 순서가 결정된다.  설명쌓임 맥락(Stacking Context)은 HTML 요소들을 가상의 z축(깊이) 방향으로 배치하는 개념이다. 기본적으로 요소들은 DOM 순서에 따라 쌓인다. 즉, 뒤에 정의한 요소일수록 화면에선 위에 위치한다. position을 적용한 요소(positioned)는 position을 적용하지 않은 요소(non-positioned)보다 위에 쌓인다. posit..