Z-index

 

z-index을 배우기에 앞서 

이런 형태의 div를 생성했다.

 

 

이런식으로 red의 div안에 yellow를 포함시키면 어떻게 될까?

 

 

이런식으로 겹치게 된다.

 

 

이제 position을 absolute로 주면.

 

모든 div가 겹쳐진다. 순서는 red위에 yellow 위에 blue가 있을 것이다.

 

 

 

 

 

이제 노란색 블록과 파란색 블록을 조금씩 움직여준다.

이 stack 순서는 html 코드의 순서를 따른다.

blue div가 코드순에서 제일

아래에 위치하므로 블루가 

가장위에 있는 것처럼 보이는 것이다.

 

하지만 우리는 이러한 stack순서를 위해

html 코드의 순서까지 고려하기는 

힘들다.

 

그래서 z-index를 사용한다.

 

 

z-index를 1로 바꾸어주게되면,

 

 

red가 가장위에 올라오게 된다.

 

세가지 div가 모두 z-index를 가지고 

있다면 어떻게 될까?

 

 

 

이런식으로 모두 z-index를 가지고 있기 때문에 

기존의 순서를 유지한다.

 

 

 

z-index를 사용하기 위해서는

static하지 않아야한다.

빨강이 1

노랑이 0

파랑이 -1 이므로

빨강 - 노랑 - 파랑 순으로 쌓인다.

 

https://github.com/ehddud1006/dongpu2/commit/e6d53cb283add26e7d7f6b17a1f353d2faead3f0