안녕하세요. 이번 시간에는 z-index에 대해 알아보겠습니다.
보통 뒤에 나오는 태그가 먼저 나오는 태그보다 위에 위치합니다. 만약 먼저 나오는 태그를 더 위에 배치하고 싶다면 어떻게 해야 할까요? 이 때 position과 z-index라는 css 속성을 사용합니다.
먼저 규칙은 다음과 같습니다.
- position 속성이 없는 태그들은 나오는 순서대로 쌓입니다.
- position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓입니다.
- position 속성에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓입니다.
- 하지만 z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선입니다.
여기서 마지막 규칙이 헷갈리기 때문에 주의깊게 보셔야 합니다.
일단 z-index는 position이 relative거나 absolute여야 동작합니다. 먼저 position이 static인 태그들이 나오는 순서대로 쌓이고, 그 위에 relative나 absolute인 태그들이 나오는 순서대로 쌓입니다.
다음 예제를 보면서 알아봅시다. 모질라의 예제를 제가 조금 수정해보았습니다. 먼저 태그 구조는 다음과 같습니다.
- div#1(relative)
- div#2(relative)
- div#3(absolute)
- div#4(relative)
- div#5(relative)
- div#6(absolute)
- div#7(static)
쌓이는 순서를 파악해봅시다. 먼저 static(포지션 설정 X)인 div#7 태그가 제일 먼저 쌓입니다. 나오는 순서는 제일 뒤이긴 하지만 다른 태그들이 모두 relative나 absolute이기 때문에 div#7이 제일 아래에 쌓입니다. div#2가 div#7보다 먼저 나옴에도 position이 있기 때문에 위에 쌓이는 것을 보실 수 있습니다.
그 다음에는 div#1, div#2, div#3이 쌓이는데요. div#2의 z-index가 2, div#3의 z-index가 4, div#1의 z-index가 5이므로 div#2, div#4, div#1 순으로 쌓입니다.
이제 부모간 서열 정리는 끝났고, div#3 안의 자식들의 서열을 정리하면 됩니다. div#3 아래에 div#4,5,6이 있습니다. div#6의 z-index는 따로 정의하진 않았지만 0이라고 보시면 됩니다. 따라서 -1인 div#5가 더 아래로 가고, 6인 div#4는 위로 갑니다.
여기서 주의해야 하고, 사람들이 제일 궁금해하는 점이 div#1의 z-index가 5고, div#4의 z-index가 6인데 왜 div#1이 더 위에 있냐는 것입니다.
여기서 규칙 4가 나옵니다. 부모에 z-index가 있는 경우에는 아무리해도 부모의 z-index가 우선입니다. 보통 stacking context라고 부르는데요. position이 있는 태그들은 stacking context라는 것을 생성합니다. 그의 자식 태그들의 z-index는 부모 context 안에서만 놀게 됩니다.
따라서 div#4,5,6은 아무리 z-index가 높아도 부모인 div#3의 z-index: 4 안에서 놀게 되는 것입니다. 같은 context 안에서 형제들 간의 쌓임 비교에만 z-index가 의미가 있지, 다른 context의 태그와의 비교에는 의미가 없습니다.
이상으로 z-index를 알아보았습니다! 다음 시간에는 블록 포매팅 컨텍스트(BFC)에 대해 배워보겠습니다!
익명
