section {
    margin-top:500px;
    width:200px;
    height:200px;
    border:10px solid red;
}

section > div {
    width:50%;
    height:25%;
    background-color:blue;
    position:absolute;
    /* 4등 : z-index 도 없고 맨 처음 등장한 유령이다. */
}

section > div:nth-child(1) {
    top:0;
    left:0;
}

section > div:nth-child(2) {
    background-color:gold;
    top:10%;
    left:10%;
    z-index:2; /* 경쟁자 중에서 2가 가장 큰 수 이기 때문에 맨 위(1등)에 위치한다. */
}

section > div:nth-child(3) {
    background-color:pink;    
    top:20%;
    left:20%;
    z-index:1; /* 경쟁자 중에서 2 다음으로 높은 수(1) 이기 때문에 2등이 된다. */
}

section > div:nth-child(4) {
    background-color:green;    
    top:30%;
    left:30%;
    /* z-index가 없으면 기본적으로 경쟁에서 밀린다. 그래서 3등이다. */
}