이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌6 - CSS - 일 년 전 등록

z-index

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 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)에 대해 배워보겠습니다!

목록
투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.