Z-색인이 작동하지 않는 4가지 이유(및 해결 방법)

Z-색인이란 무엇입니까? Z-색인은 레이어의 HTML 요소를 서로의 상단에 배치할 수 있는 CSS 속성입니다. 얼핏 보면 간단해 보이지만 의외로 간단합니다.

Z-색인을 999999로 설정하더라도 원하는 방식으로 작동하지 않도록 하는 이상하고 직관적이지 않은 규칙이 있습니다!

이 기사에서는 z-index가 작동하지 않는 가장 일반적인 4가지 이유에 대해 자세히 설명합니다. CSS를 사용하여 요소를 다른 요소의 앞이나 뒤로 가져오는 방법을 배우게 됩니다.

1. 동일한 스택 컨텍스트에 있는 요소는 표시되는 순서대로 표시되며 후자의 요소는 이전 요소 위에 표시됩니다.

첫 번째 예에서는 3가지 주요 요소를 포함하는 비교적 간단한 레이아웃을 가지고 있습니다.

• 고양이 이미지
• 텍스트가 있는 흰색 블록
• 같은 고양이의 다른 이미지

이에 대한 HTML 마크업은 다음과 같습니다.

<div class="cat-top"></div>
    
<div class="content__block">
  Meow meow meow...
</div>
    
<div class="cat-bottom"></div>

이 레이아웃에서는 흰색 텍스트 블록이 두 고양이 위에 있는 것이 이상적입니다.

이를 달성하기 위해 두 고양이 이미지의 CSS에 약간의 음수 여백을 추가하여 흰색 블록과 약간 겹칩니다.

.cat-top { 
    margin-bottom: -110px;
}  

.cat-bottom {    
    float: right;
    margin-top: -120px;
}

그러나 다음과 같이 보입니다.

Pen Z-색인 참조:#1:위치 설정, #2:자연스러운 스택 순서, #3:CodePen의 Jessica(@thecodercoder)의 CSS 속성

첫 번째 고양이는 실제로 우리가 원하는 것처럼 흰색 콘텐츠 블록 아래에 위치합니다. 하지만 두 번째 고양이 이미지는 블록 위에 위치합니다!

왜 이런 일이 발생합니까?

이 동작의 이유는 자연스러운 스택 순서 때문입니다. 웹 페이지에서. 이 가이드라인은 기본적으로 어떤 요소가 맨 위에 있고 어떤 요소가 맨 아래에 있는지를 결정합니다.

요소에 z-색인이 설정되지 않은 경우에도 요소가 맨 위에 있어야 하는 운율과 이유가 있습니다.

우리의 경우 어떤 요소도 z-인덱스 값을 갖지 않습니다. 따라서 스택 순서는 모양 순서에 따라 결정됩니다. 이 규칙에 따르면 마크업에서 나중에 오는 요소는 앞에 오는 요소 위에 있습니다.

(Mozilla 개발자 네트워크에서 더 많은 스택 순서 지침을 읽을 수 있습니다.)

고양이와 흰색 블록이 있는 예에서 고양이는 이 규칙을 따릅니다. 이것이 첫 번째 고양이가 흰색 블록 요소 아래에 있고 흰색 블록이 두 번째 고양이 아래에 있는 이유입니다.

네, 스태킹 순서는 모두 양호하지만 두 번째 고양이가 흰색 블록 아래에 있도록 CSS를 어떻게 수정합니까?

두 번째 이유를 살펴보겠습니다.

2. 요소의 위치가 설정되지 않았습니다.

겹침 순서를 결정하는 다른 지침 중 하나는 요소의 위치가 설정되어 있는지 여부입니다.

요소의 위치를 ​​설정하려면 CSS position를 추가하세요. static 이외의 속성 , 예:relative 또는 absolute . (내가 쓴 이 기사에서 더 자세히 읽을 수 있습니다.)

이 규칙에 따라 위치가 지정된 요소는 위치가 지정되지 않은 요소 위에 표시됩니다.

따라서 흰색 블록을 position: relative로 설정합니다. , 두 개의 고양이 요소를 배치하지 않은 상태로 두면 흰색 블록이 고양이의 맨 위에 쌓이는 순서대로 놓입니다.

위의 Codepen을 가지고 놀 수도 있습니다.

우후!

이제 transform을 사용하여 아래쪽 고양이를 거꾸로 회전시키고자 합니다. 재산. 그렇게 하면 두 고양이 모두 머리만 튀어나온 상태로 흰색 블록 아래에 있게 됩니다.

하지만 그렇게 하면 더 많은 z-index - 관련 혼란. 다음 부분에서 문제와 해결책을 다루겠습니다.

3. 불투명도 또는 변형과 같은 일부 CSS 속성을 설정하면 요소가 새 스택 컨텍스트에 배치됩니다.

방금 언급했듯이 우리는 아래쪽 고양이를 거꾸로 뒤집고 싶습니다. 이를 수행하기 위해 transform: rotate(180deg)를 추가합니다. .

.cat-bottom { 
    float: right;
    margin-top: -120px;
    transform: rotate(180deg);
}

하지만 이로 인해 아래쪽 고양이가 다시 흰색 블록 위에 표시됩니다!

도대체 여기에서 무슨 일이 일어나고 있는 걸까요?

이 문제가 자주 발생하지 않을 수 있지만 스택 순서의 또 다른 측면은 transform과 같은 일부 CSS 속성이 또는 opacity 요소를 자체의 새로운 스택 컨텍스트에 넣습니다.

이것이 의미하는 것은 transform .cat-bottom으로 요소는 마치 z-index가 있는 것처럼 작동합니다. 0. position가 없더라도 또는 z-index 전혀 설정! (W3.org에는 opacity와 함께 작동하는 방식에 대한 정보가 있지만 다소 밀집된 문서가 있습니다. 속성)

우리는 z-index를 추가하지 않았음을 기억하십시오. 흰색 블록에 대한 값, position: relative만 . 이것은 위치가 지정되지 않은 고양이 위에 흰색 블록을 배치하기에 충분했습니다.

그러나 .bottom-cat 이후 요소가 z-index: 0으로 상대적으로 배치된 것처럼 작동합니다. , 변환하면 흰색 블록 위에 배치됩니다.

이에 대한 해결책은 position: relative를 설정하는 것입니다. 명시적으로 z-index 설정 적어도 흰색 블록에. 한 단계 더 나아가 position: relative를 설정할 수 있습니다. 및 낮은 z-index 추가 안전을 위해 고양이 요소에.

.content__block {
    position: relative;
    z-index: 2;
}
.cat-top, .cat-bottom {
    position: relative;
    z-index: 1;
}

제 생각에는 이렇게 하면 더 기본적인 z-색인 문제가 전부는 아니더라도 대부분의 문제가 해결될 것입니다.

이제 z-index가 작동하지 않습니다. 이것은 부모와 자식 요소를 포함하기 때문에 조금 더 복잡합니다.

4. 요소는 부모의 z-색인 수준으로 인해 더 낮은 스택 컨텍스트에 있습니다.

이에 대한 코드 예제를 확인해 보겠습니다.

CodePen에서 Jessica(@thecodercoder)의 Pen Z-index:#4 다른 스택 컨텍스트를 참조하세요.

일반 콘텐츠가 있는 간단한 웹페이지와 콘텐츠 상단에 "피드백 보내기"라고 표시된 분홍색 사이드 탭이 있습니다.

그런 다음 고양이 사진을 클릭하면 투명한 회색 배경 오버레이가 있는 모달 창이 열립니다.

그러나 모달 창이 열려 있어도 사이드 탭은 여전히 ​​회색 오버레이 위에 있습니다. 사이드 탭을 포함한 모든 항목 위에 오버레이가 표시되기를 원합니다.

문제의 요소에 대한 CSS를 살펴보겠습니다.

.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}

모든 요소에는 위치가 설정되어 있고 사이드 탭에는 z-index가 있습니다. 5개 중 z-index: 1에 있는 콘텐츠 요소 상단에 배치 .

그런 다음 모달에는 z-index: 100이 있습니다. 해야 z-index: 5의 측면 탭 상단에 놓습니다. . 대신 모달 오버레이가 측면 탭 아래에 있습니다.

왜 이런 일이 발생합니까?

이전에 우리는 요소의 위치 설정 및 마크업의 순서와 같이 스택 컨텍스트에 들어가는 몇 가지 요소를 다루었습니다.

하지만 스택 컨텍스트의 또 다른 측면은 자식 요소가 부모의 스택 컨텍스트로 제한된다는 것입니다.

문제의 세 가지 요소를 자세히 살펴보겠습니다.

다음은 마크업입니다.

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

마크업을 보면 콘텐츠와 사이드 탭 요소가 형제임을 알 수 있습니다. 즉, 마크업에서 동일한 수준에 존재합니다(z-인덱스 수준과 다름). 그리고 모달은 콘텐츠 요소의 자식 요소입니다.

모달은 콘텐츠 요소 내부에 있으므로 z-index 100은 부모인 콘텐츠 요소 내에서만 효과가 있습니다. 예를 들어, 모달의 형제인 다른 자식 요소가 있는 경우 해당 z-index 값은 서로 위나 아래에 놓이게 됩니다.

그러나 z-index 부모 콘텐츠 요소에는 z-index가 있기 때문에 해당 자식 요소의 값은 부모 외부의 어떤 것도 의미하지 않습니다. 1로 설정합니다.

따라서 모달을 포함한 자식은 z-index에서 벗어날 수 없습니다. 수준.

(이 약간 우울한 은유로 기억할 수 있습니다. 아이는 부모에 의해 제한될 수 있고 부모에게서 벗어날 수 없습니다.)

이 문제에 대한 몇 가지 해결책이 있습니다.

해결책:모달을 외부로 이동 콘텐츠 부모 및 페이지의 기본 스태킹 컨텍스트로.

수정된 마크업은 다음과 같습니다.

<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>

이제 모달 요소는 다른 두 요소의 형제 요소입니다. 이렇게 하면 세 가지 요소가 모두 동일한 스택 컨텍스트에 놓이게 되므로 각 z-색인 수준이 이제 서로 영향을 미칩니다.

이 새로운 스택 컨텍스트에서 요소는 위에서 아래로 다음 순서로 표시됩니다.

• 모달(z-index: 100 )
• 사이드 탭(z-index: 5 )
• 콘텐츠(z-index: 1 )

대체 솔루션:콘텐츠에서 위치 지정을 제거하여 모달의 z-색인을 제한합니다.

마크업을 변경하고 싶지 않거나 변경할 수 없는 경우 position을 제거하여 이 문제를 해결할 수 있습니다. 콘텐츠 요소에서 설정:

.content {
    // No position set    
}

.modal {
    position: absolute;
    z-index: 100;
}

.side-tab {
    position: absolute;
    z-index: 5;
}

콘텐츠 요소가 이제 위치가 지정되지 않았으므로 더 이상 모달의 z-index를 제한하지 않습니다. 값. 따라서 열린 모달은 z-index가 더 높기 때문에 사이드 탭 요소 상단에 배치됩니다. 100개 중.

이것이 작동하는 동안 저는 개인적으로 첫 번째 솔루션을 선택할 것입니다.

미래에 어떤 이유로 콘텐츠 요소를 배치해야 하는 경우 스택 컨텍스트에서 모달의 순서가 다시 제한되기 때문입니다.

요약

이 튜토리얼이 도움이 되었기를 바랍니다! 요약하자면 z-색인과 관련된 대부분의 문제는 다음 두 가지 지침을 따르면 해결할 수 있습니다.

1. 요소의 위치 설정과 Z-색인 번호가 올바른 순서로 되어 있는지 확인하세요.
2. z-index를 제한하는 상위 요소가 없는지 확인 자녀의 수준

리소스:

• W3.org:투명도:'불투명도' 속성
• W3.org:스택 수준 지정
• Mozilla 개발자 네트워크:스태킹 컨텍스트
• PhilipWalton.com:Z-index에 대해 아무도 알려주지 않은 것
• Smashing Magazine:Z-색인 CSS 속성