CSS속성_z-index

요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다.

결국, 둘 중 하나는 다른 요소로 인해 덮어쓰게 됩니다.

이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다.

이것을 정하는 것이 바로 z-index의 역할입니다.

쌓임 순서는 z-index 속성 값을 설정하여 바꿀 수 있습니다.

z-index 속성

요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.

position 값이 static이 아닌 경우에 지정 가능한 속성입니다.

순서 값이 없을 경우 생성 순서(코드상 순서)에 따라 쌓이고 number로 속성값 선언 시 큰 값이 가장 위쪽에 쌓여집니다.

부모가 z-index 값이 있을 경우 부모 안에서만 의미가 있습니다.

 

속성값 (auto)

auto : 쌓임 순서를 부모와 동일하게 설정.

number : 해당 수치로 쌓임 순서를 설정. (음수 허용)

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

Understanding CSS z-index