하지만 노란색 박스의 높이 값을 200px에서 300px로 조정하면 노란색 박스가 파란색 박스 뒤에 숨어 있는 걸 알 수 있습니다.

예제소스 Exercise/9장/1_ z-index/style01.css

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

그림 9-3 숨겨진 노란색 박스가 나타남

이처럼 형제간에 순수한 3차원 특징을 갖는 fixed 또는 absolute 속성을 적용하면 나중에 적용된 HTML 요소가 상위 레이어에 위치합니다.