z-index 란?!

 

 

우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. 

 

 CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 z-index 속성 값을 설정함으로써 바꿀 수 있다.

 

 

z-index

엘리먼트의 Z축 위치를 결정하는 것은 굉장히 간단해 보인다. z-index 라는 하나의 프로퍼티를 사용하고 이 프로퍼티는 하나의 정수 값을 가진다.  그러나 z-index 속성이 복잡한 HTML 계층적 엘리먼트들에 지정되었을 때에는 동작을 이해하기 힘들고 심지어 예측하지 못할 때도 있다. 이것은 엘리먼트들의 쌓임 순서를 결정하는 규칙(이하 쌓임 규칙)이 복잡하기 때문이다

 

 

z-index 값을 따로 설정하지 않으면 기본 값은 0이다.

 

여러 박스들 중에 a라는 박스에 

 

z-index: 1;

 

값을 넣으면 a박스가 다른 박스들 보다 제일 앞에 나와 보인다. (추가적인 레이어를 생성하고, 여기에 a박스를 위치시킴)

 

그리고 b라는 박스에 

 

z-index: 2;

 

값을 넣으면 b박스가 a박스보다 더 앞에 나온다. (레이어가 2개가 더 추가된 것임.)

 

 

만약 같은 레벨의 레이어에 있다면, 

 

나중에 배치된 것이 우선적으로 보여진다.