요소 쌓임 맥락
1. 3차원 공간에서의 요소 배치
웹 페이지는 기본적으로 2차원 평면이지만, 요소들이 겹칠 때는 3차원적인 고려가 필요합니다. 이때 사용하는 것이 바로 z-index 속성입니다. z-index는 요소의 쌓임 순서(stacking order)를 결정하며, 어떤 요소가 다른 요소 위에 나타날지를 제어합니다. 이는 파워포인트와 같은 프로그램에서 맨 앞으로 가져오기와 같은 기능이라고 생각하시면 됩니다.
1.1 z-index의 기본 특성
오직 static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됩니다.
또한 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능합니다.
아래 예제에서 z-index를 사용해보겠습니다. red 박스가 가장 위에 있고, green 박스가 그 다음, blue 박스가 가장 아래에 위치하고 있습니다. 이 box의 순서를 바꾸어 보세요.
[정리]
position이static외의 값을 가진 박스에 대하여 z축의 위치를 지정합니다.- 값이 클수록 제일 위로 배치됩니다.
- 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다.
- 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있습니다.
- 유지보수를 위해 10이나 100 단위로 작업하면 좋습니다. 주로 100단위를 많이 사용합니다.