z-index

z-index

복잡한 웹페이지를 구현할 때 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기는데 이 때 이용하는 속성이다.

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

❗️z-index 속성을 너무 많이 사용하면 상대적 깊이를 파악하기 어려워지므로 스타일 유지보수가 힘들어질 수 있다.

💡 조건
position이 static이 아닌 값일 때
flex-itmes에도 사용 가능 (position이 없어도)

❗️ 부모 요소 안에서 형제 요소들끼리의 순서를 지정할 떄 사용

✔️ before

.circle.blue{
	background-color: blue;
    position: relative;
    
}

.circle.orange{
	background-color: orange;
    position: relative;
}

둘 다 position: relative 이므로 더 밑에 적힌 오렌지가 파랑을 덮는다.

그렇다면 파랑을 더 위로 올리고 싶다면 어떻게 해야할까?
이럴 때 사용하는 것이 z-index 속성이다.

✔️ after

.circle.blue{
	background-color: blue;
    position: relative;
    z-index: 2;
}

.circle.orange{
	background-color: orange;
    position: relative;
}

z-index가 높은 값을 가지는 것이 위로 온다.

상대적 깊이

💡 z-index 가 없을 때

• position: static이 아닌 요소 - 무조건 position 속성이 static인 요소 위로 올라온다.
• position: static인 요소 끼리 - HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라온다.
• position: static이 아닌 요소 끼리 - HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라온다.

💡 z-index 가 있을 때

❗️ position 속성이 static이 아닌 요소의 깊이를 조절할 수 있음

• position: static인 요소 - z-index: auto
• z-index > 0 요소 - position: static 요소보다 앞으로 올라온다.
• z-index < 0 요소 - position: static 요소보다 뒤로 내려간다.
• position: static이 아닌 요소 끼리 - z-index 속성값이 클 수록 앞으로 올라오고, 작으면 작을수록 뒤로 내려갑니다. (예: z-index: 1인 요소보다 z-index: 2인 요소가 더 앞에 나오고 z-index: -1인 요소보다 z-index: -2인 요소가 더 뒤로 들어감)

z-index: -1

💡 스태킹 컨텍스트
z-index가 작동되는 기준점

❗️ 스태킹 컨텍스트가 지정이 안되어있으면 --> 최 상위 요소 : HTML
➡️ HTML상에서 꼴찌

== position:absolute 와 컨테이닝 블록과의 관계와 비슷함!

❗️부모에게 스태킹 컨텍스트가 있는지 없는지가 중요!

❌ 무조건 숫자가 크다고 전체 페이지의 가장 먼저 나오는 것이 아니다.

⭕️부모에 스태킹 컨텍스트가 있는 지를 파악하고우물안의 개구리인지 글로벌 1위인지 파악하기

[___]로 감싸져있는 것이 스태킹 컨텍스트(div)이다.

1. 루트에만 스태킹 컨텍스트가 있을 때
   
   당연히 z-index: 9999가 z-index: 1보다 위에 있다.
   ➡️ z-index: 9999 - 글로벌(root) 1위

2. 파란색의 스태킹 컨텍스트가 있을 때
   
   z-indx:9999라는 애는 z-index:0라는 스태킹 컨텍스트 안에서만 짱이다.
   z-indx:9999의 부모인 z-index:0는 부모의 형제요소인 z-index: 1보다 작은 숫자이므로 z-index: 9999가 z-index: 1보다 아래에 있다.
   ➡️ z-index: 9999 - 동네(z-index:0) 1위
   ➡️ z-index: 9999 - 글로벌(root)에서는 z-index:1에게 밀린다.

부모 요소에 z-index:0 (auto가 아닌 값)에 의해 자식 요소를 지역적으로 만든다.