그럼 이번에는 z-index 속성을 사용하여 파란색 박스와 노란색 박스의 z축 위치를 조정해 보겠습니다. z-index 속성의 속성값에는 정수를 쓸 수 있고 숫자가 클수록 상위 레이어로 이동합니다. 현재 노란색 박스의 z-index 속성의 속성값이 파란색 박스보다 크기 때문에 노란색 박스가 상위 레이어로 올라옵니다.

예제 소스 Exercise/9장/1_z-index/style02.css

#z-index-1 {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: yellow;
    z-index: 10;
}

#z-index-2 {
    position: absolute;
    width: 100%;
    height: 200px;
    background-color: blue;
    z-index: 5;
}

그림 9-4 z-index 값이 큰 노란색 박스가 상위로 올라온다