CSS: z-index에 대하여

z-index는 0부터 시작해 1부터 시작해? 숫자는 몇까지 붙일 수 있어?

z-index는 0부터 시작합니다. 즉, z-index가 0인 요소는 다른 요소들보다 아래에 위치하게 됩니다. z-index는 정수값으로 지정할 수 있으며, 양수와 음수 모두 가능합니다.

z-index의 최대값은 2147483647입니다. 하지만 이렇게 큰 값까지 지정하는 경우는 드물며, 일반적으로는 100 이하의 값이면 충분합니다.

z-index는 부모 요소와 관련이 있으므로, 부모 요소와 동일한 층위에 있는 다른 형제 요소들과만 비교됩니다. 따라서, 부모 요소와는 별도로 z-index 값을 지정해주어야 합니다.

z-index는 같은 층위에 있는 요소들 간의 높낮이를 결정하는 속성으로, 브라우저에서 요소들의 위치를 결정할 때 사용됩니다. 따라서, 적절한 z-index 값 설정을 통해 요소들의 높낮이를 조정하면서 웹 페이지 레이아웃을 구성할 수 있습니다.

---

z-index의 숫자가 작을 수록 맨 위 레이어에 있는 거야?

z-index의 숫자가 크면, 즉 다른 요소보다 높은 z-index 값을 가지면 요소가 상위 레이어에 위치하게 됩니다. 따라서, z-index 값이 작을수록 다른 요소들보다 더 낮은 층위에 위치하게 됩니다.

즉, z-index의 숫자가 작을수록 맨 아래 레이어에 있는 것이며, z-index의 숫자가 클수록 맨 위 레이어에 있는 것입니다.

---

그럼 왜 맨 앞의 레이어의 z-index가 1인 거지?

보통 z-index의 기본값은 0입니다. 그러나 position 속성이 지정된 요소들은 기본적으로 z-index 값을 상속하지 않으며, z-index 속성이 지정되어 있지 않으면 z-index 값이 자동으로 0으로 지정됩니다.

따라서, position 속성이 지정된 요소에서 z-index 속성이 지정되지 않은 경우에는, 브라우저가 자동으로 z-index 값을 1로 설정합니다. 이러한 동작으로 인해 보통 맨 앞의 레이어는 z-index 값이 1이 됩니다.

하지만, 만약 다른 요소들의 z-index 값이 1보다 큰 경우에는, 해당 요소들이 맨 앞에 위치하게 되며, 맨 앞의 레이어가 항상 z-index 값이 1이라는 보장은 없습니다.