z-index 개념

z-index란, 화면출력의 순서를 정할 때 사용되는 CSS의 프로퍼티이다. 먼저 나오는 태그를 더 위에 위치하고 싶다면, position과 z-index를 사용하면 된다.

화면출력의 순서는 다음과 같이 비교할 수 있다.

• 먼저 나오는 태그보다 나중에 나오는 태그가 위에 위치한다.
• position이 적용된 태그가 위에 위치한다.(static은 제외)
• 부모요소끼리 z-index 값을 비교하여, 값이 큰 순서대로 위에 위치한다.
• 동일 부모요소에 있는 자식요소끼리 z-index 값을 비교하여, 값이 큰 순서대로 위에 위치한다.
• 자식 z-index 값이 아무리 커도 다른 부모요소 보다는 위에 위치할 수 없다. 즉, 자기 부모요소안에만 위치한다.

다음의 코드로 이해하면 좋을 것 같다.

출처: z-index