프로젝트를 진행하며 겪은 CSS z-index, position 관련 학습이 필요하다 느껴 작성한 글 입니다.
만약 z-index를 사용한다면..
위치도 잘 잡히고 너무 좋죠!!! 모든곳에 사용해도 되는 것 아닌가요?
라고 생각하는 당신 위험합니다..
프로젝트를 진행하며 컴포넌트를 각자 만든 뒤 합쳤을 때 위로 올라가면 안되는 부분이 위로 올라가있는 경험을 해보셨다면 제 위의 말이 이해가 갈것입니다.
구조가 굉장히 복잡하게 짜여져있기때문에 '언제 어떤순서로 컴포넌트를 불러왔고 position 속성은 어떤것으로 설정했다'를 전부 기억하고있다면 문제가 되지는 않겠지만 우리는 혼자서 모든 일을 하지 않고 기억력도 엄청나게 좋지는 않습니다! (저만 그럴 수 있습니다.)
z-index를 사용하기 전
요소 간 상대적 깊이 먼저 고려하기
일단 우리는 z-index를 사용하기 전 요소 간 상대적인 깊이를 먼저 고려해야합니다. 이를 고려한 뒤에만 z-index를 사용할 수 있습니다!!! (제발 z-index를 먼저 사용하지 말아주세요.)
기본적으로 z-index 속성이 적용되지 않은 요소간에는 나중에 나오는 요소가 먼저 나오는 요소보다 위로 올라오도록 되어있습니다.
하지만 만약 position 속성이 relative, absolute, fixed, sticky등으로 적용되어있다면 겹치는 순서가 변합니다.
만약 1번 상자만 position 속성을 relative로 바꾼다면 위의 사진같은 순서로 변경됩니다.
(2번 상자의 position 속성도 바꾼다면 처음 사진 같은 순서로 변경되겠죠?)
position의 기본값은 static입니다.
쉽게 이해하면 position이 전부 static일 때는 불러온 순서대로 위로 올라오게되고 만약 position이 static이 아닌 요소가 있다면 그 요소는 무조건 속성이 static인 요소 위로 올라옵니다.
👆전부 static일 때
👆1번만 static이 아닐 때
👆1번과 2번이 static이 아닐 때
정리하면
- position이 static인 요소는 나중에 나오는 요소가 먼저 나오는 요소 위로 올라갑니다.
- position이 static이 아닌 요소는 무조건 position 속성이 static인 요소 위로 올라갑니다.
- position이 static이 아닌 요소간에는 나중에 나오는 요소가 먼저 나오는 요소 위로 올라갑니다.
z-index를 사용할 때
우리가 z-index를 사용한다면 위의 규칙을 무시할 수 있습니다.
z-index 속성값이 낮은 요소가 먼저 그려지고 z-index 속성값이 높은 요소가 먼저 그려집니다.(음수도 사용 가능)
이렇게 얘기하면 굉장히 쉬워보이지만
position 속성이 static일 때 z-index 속성이 0으로 자동 고정되어있다는 사실을 간과하기때문에 문제가 생깁니다.
-> z-index 값을 설정해도 적용되지 않습니다.
또, z-index가 전체 범위에서 비교된다고 생각하지만 실제로는 특정 범위 내에서만 비교됩니다.
이를 css에선 stacking context라고 부르는데
예를 들면,
1번 블럭의 z-index를 9999로 두고 2번 블럭의 z-index를 99로 둔다면 1번 블럭이 당연히 2번 블럭 위로 올라가있을것입니다.
하지만 만약 1번 블럭을 <div>로 감싼다면 1번블럭이 2번 블럭의 아래로 내려가있습니다.
두 블럭의 z-index값은 서로 다른 범위에서 비교됩니다.
첫 번째 블럭의 wrapper의 z-index 1과 두 번째 블럭의 z-index 99가 비교되기 때문에 이러한 결과가 나타나게 됩니다.
앞에서 말했던
1.position속성이 static일 때 z-index 속성은 0으로 자동 고정
2. z-index는 전체 범위가 아닌 특정 범위 내에서만 비교됨
앞의 내용을 모르고 z-index부터 사용하면 큰 혼란을 초래할 수 있기 때문에 신중하게 사용하시는걸 추천합니다.
다들 즐거운 코딩하세요 😇
