[css] z-index 이해하기

 

 

쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화이다.

Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정한다.

각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지한다.

 

 

z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다.

(레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다.)

높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다.

큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. 

z-index로 제어를 하지 않아도 position이 static 외의 다른 값인 요소를 설정하게 되면 position이 static인 요소보다 앞으로 위치하게 된다.

즉, z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.

 

 

 

 

z-index