CSS3의 Z-Index는 무엇이며 왜 사용합니까?

Z-지수란 무엇입니까?

Z-색인은 HTML 요소를 쌓는 순서 또는 우선 순위를 정의하는 데 사용되는 CSS 속성입니다. z-index 값이 높은 요소는 더 높은 우선순위를 가지며 z-index 값이 작은 요소(-1,-2와 같은 음수 값)는 낮은 우선순위를 갖습니다.

z-index(z-index: -1) 값이 음수인 요소는 z-index(z-index: 1 또는 99) 값이 높은 요소 아래에 쌓일 수 있습니다. 여기서 z-index에 대해 주의해야 할 중요한 점은 static이 아닌 위치 값(상대, 절대, 고정, 고정)에만 작동하며 display의 직계 자식 요소인 flex 또는 display: grid에도 작동한다는 것입니다. .

정적 위치에서 Z-Index가 무시되는 이유는 무엇입니까?

위치: 정적은 위쪽, 왼쪽 및 Z-인덱스에서 모든 위치 명령을 무시하는 것을 의미합니다.

Z-Index에 사용할 수 있는 가능한 값은 무엇입니까?

Z-색인을 지정하지 않으면 기본값이 자동으로 사용됩니다.

CSS 선택기를 사용하여 Z-인덱스 값을 명시적으로 지정하려는 경우 Integer 형식 또는 Global 형식으로 지정할 수 있습니다.
- Values for Integer format:
Z-지수: 1; -> 이것은 더 높은 우선순위를 가질 것입니다.

Z-지수: -1; -> 우선 순위가 낮습니다.
- Values for Global format:
Z-색인: 상속; -> 상속을 사용하여 부모 요소에서 속성의 계산된 값을 가져오도록 요소에 지시합니다.

Z-색인: 초기; -> 항상 요소에 대한 속성의 기본값으로 설정됩니다.

Z-색인: 설정되지 않음; -> 설정되지 않은 속성을 사용하면 2가지 경우에 값을 속성으로 설정합니다. 첫 번째 경우 상속된 속성을 확인하고 상속된 키워드처럼 동작하고 두 번째 경우 초기 속성을 확인하고 초기 키워드처럼 동작합니다.

예를 들어 이해해 봅시다.

HTML:

<div class="container">
          <div class="card" id="card1"></div>
          <div class="card" id="card2"></div>
         <div class="card" id="card3"></div>
  </div>

CSS:

.card{
            position: relative;
            top:34px;
            border: 2px solid #000;
               }

#card1{
            position:relative;
            top:39px;
            z-index:2;
           }

참고: z-index는 위치(정적 제외)에서만 작동하므로 CSS 스타일의 값으로 위치 속성을 포함해야 합니다.

Z-지수 요약:

위치(상대, 절대, 고정 또는 고정)와 가변 상자 및 그리드와 함께 z-인덱스를 사용할 수 있습니다. 한 요소를 다른 요소에 쌓는 데 사용됩니다.