CSS 12 z-index속성이란?

 

z-index

가로 세로만 있는게 아님 z-index !

속성은 요소의 쌓임 순서(stack order)를 정의 할 수 있다.

 

정수 값을 지정하여 쌓임 맥락(stacking context) 에서의 레벨을 정의 하는 방식으로 적용 되며 , 위치 지정 요소에 대해 적용할 수 있는 속성이다.

 

위치 지정 요소 ?(positioned element)

position속성이 정의되어 있는 요소를 말한다.

뭐가 어떻게 쌓이냐?

 

우리가 html으로 문서로 작성해서 요소들을 만들어주면 -> 요소들은 문서의 흐름에따라 차곡차곡 배치된다. 그러나 포지션 속성들을 조작해서 위치를 변경해주는 경우엔 요소들이 동일한 위치에서 겹쳐지는 모습들이 발생한다.

 

이런 경우 가로 세로 뱡향 없이 쌓이게 된다.

 

모든 div 태그는 position: relative 가 기본값으로 지정되어 있다.

z-index는 기본값은 auto이다. auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.

 

그런데 정수로 값을 지정하면 올라 쌓아지는 현상이 발생한다. 0부터 5까지 높여가면서 주어야 한다..

 

나중에 생긴 요소가 먼저 생긴 요소 에 쌓이는 형성을 이룬다.

 

쌓이는 모습이 보이죠? . 이때 위로 쌓이는 이 방향을 z축이라고 한다.

z축의 순서를 바꾸고 싶다 z-index를 사용하면 된다.!

z-index는 상대적으로 정수 값을 올리면서 사용하는것 이다.!

 

 

첫 번째 요소에 1을 주면 두번째 요소에 0 낮은 정수 값을 주면

1써이는 요소가 2보다 크기 때문에 가려진 상태이다.

.first { z-index: 1;}
.second {z-index: 0;}

 

.first {z-index: 1;}
.second {z-index: 2;}

 

첫 번째 요소에 1을 주면 두번째 요소에 0 낮은 정수 값을 주면 first 요소가 secode 보다 크기 때문에 가려진 상태이다.

그럼 2번째는 2로 정수 값을 주면 3번이 가려진다. 왜? 3번 요소에는 z-index값이 없기 때문이다1!

3번에 정수값을 높이면 나온다!

---

내용 정리

• z-index는 요소가 쌓이는 순서를 결정 할 수 있다.
• 기본 값은 auto이며, 정수 값으로 정의한다.
• 정수 값은 쌓임 맥락에서의 레벨을 의미하며, 값이 클 수록 전면에 표시된다.