[CSS] z-index

z-index?

HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다. z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다. 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치한다.

z-index 속성을 너무 많이 사용하면 유지보수가 매우 힘들어질 수 있기 때문에 가급적이면 z-index 속성을 아예 사용하지 않는 편이 좋다.

 

z-index가 없을 때 요소(element)간의 깊이

A Box	B Box	상위
일반 요소	일반 요소	B Box
position 속성(not static)	일반 요소	A Box
position 속성(not static)	position 속성(not static)	B Box

z-index가 없을 때 요소 간 상대적 깊이는 HTML 문서 상에서 요소가 나오는 순서와 각 요소의 position 속성이 static이냐 아니냐에 따라서 결정된다.

• position 속성이 static이 아닌 요소는 무조건 position 속성이 static인 요소 위로 올라온다.
• position 속성이 static인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라온다.
• position 속성이 relative나 absolute, fixed, sticky인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라온다.

 

z-index가 있을 때 요소(element)간의 상대적 깊이

z-index 사용 시 위의 기본 규칙을 무시하고 HTML 문서 상에서 먼저 나온 요소를 나중에 나온 요소보다 앞으로 나오게 할 수 있다.

A Box	B Box	상위
z-index: 1 / position: relative	position : relative	A Box
z-index: 1 / position: relative	z-index: 2 / position : relative	B Box

position 속성이 static인 요소에서는 z-index 속성은 효과 없다. 그 이유는 position 속성이 static인 요소는 z-index 속성이 auto, 즉 0으로 고정되어 있기 때문이다.

A Box	B Box	상위
z-index: 1 / position: relative	z-index: 2	A Box

z-index 속성은 음수로 설정 가능하며 음수로 설정 시 해당 요소는 브라우저가 가장 먼저 그리기 때문에 position 속성이 static인 요소보다도 더 뒤에 나타난다.

A Box	B Box	상위
z-index: -1 / position: relative	-	B Box

• position 속성이 static인 요소에는 z-index 속성이 0으로 고정되어 변경 불가하다.
• z-index 속성이 양수로 설정된 요소는 position 속성이 static인 요소보다 앞으로 올라온다.
• z-index 속성이 음수로 설정된 요소는 position 속성이 static인 요소보다 뒤로 내려간다.
• z-index 속성이 설정된 요소 간에는 크면 클 수록 앞으로 올라오고, 작으면 작을수록 뒤로 내려간다.

 

stacking context

z-index는 특정 범위 내에서 비교되며, 이것을 CSS에서는 stacking context라고 부른다.

A Box	B Box	상위
z-index: 100 / position: relative	z-index: 2 / position: relative	B Box

A Box의 z-index가 100인데 B Box가 상위인 경우는 두 Box의 z-index 값이 서로 다른 범위에서 비교되었기 때문이다.

<div class="test">
	<div class="first">A Box</div>
<div>
<div class="second">B Box</div>

부모 .test에 z-index: 1만 주고 A Box를 감싸면 A Box의 값이 아무리 크더라도 절대 부모인 div 요소의 외부에 있는 다른 요소의 z-index 값과 경쟁할 수 없다.

 

stacking context와 관련해서 한 가지 주의할 점은 stacking context의 구조는 반드시 HTML 문서의 DOM 구조와 일치하지 않는다.

<div>
  <div>
    <div class="first">A Box</div>
  </div>
</div>
<div>
  <div>
    <div class="second">B Box</div>
  </div>
</div>

A Box	B Box	상위
z-index: 100 / position: relative	z-index: 2 / position: relative	A Box

div 요소에 별도로 z-index 속성이 없어 부모 단계에서 stacking context가 형성되지 않았으므로 z-index 값에 직접적인 비교가 일어나 A Box가 위로 올라온다. 부모 요소의 관계와 상관 없이 두 Box의 z-index 값이 같은 범위 내에서 비교가 된다.

 

 

 

 

 

참고링크

코딩교육 티씨피스쿨

CSS의 z-index 속성 이해하기