css) z-axis (z-index)

 

다음과 같이 3개의 이미지가 있고 각각의 클래스를 갖고있다

index.html

이미지들이 겹쳐져 있는데

이미지를 보면 .three 클래스의 이미지가 가장 앞쪽 (z축상)에 있고 .one 이미지가 가장 뒤쪽에 있다.

이유는 .one이 html 상 가장 앞에있고 그 다음 .two, .three 이기 때문이다.

---

z-index

디폴트로 0를 갖는다.

z-index 값이 큰 박스가 작은 박스보다 앞에 배치된다.

position:static 이라면 무시된다.

 

다음과 같이 세개의 이미지에 각각 z-index를 부여한다

.one이 0

.two가 -1

.three가 -2 

를 갖기때문에 첫번째 이미지가 가장 앞에 보인다.