z-index가 작동하지 않는 이유는 무엇입니까?

따라서 z-index올바르게 이해 하면이 상황에서 완벽 할 것입니다.

하단 이미지 (태그 / 카드)를 div 아래에 배치하고 싶습니다. 그래서 당신은 날카로운 가장자리를 볼 수 없습니다. 어떻게해야합니까?

z-index:-1 // on the image tag/card

또는

z-index:100 // on the div above

작동하지 않습니다. 이 같은 것도 조합하지 않습니다. 어떻게 오세요?

z-index속성은 단지와 요소에서 작동 position이외의 값 static(예를 들어 position: absolute;, position: relative;또는position: fixed ).

position: sticky;Firefox 에서도 지원되며 Safari에서 접두사를 사용하고 이전 버전의 Chrome에서는 맞춤 플래그로 한동안 작업했으며 Microsoft는 Edge 브라우저에 추가하려고합니다.

중요
정기적으로 배치 position: relative하려면을 설정 한 요소도 포함시켜야 합니다 z-index. 그렇지 않으면 적용되지 않습니다.

위치를 다른 값으로 설정 static했지만 요소가 z-index여전히 작동하지 않는 경우 일부 상위 요소가 z-index설정 되었을 수 있습니다 .

스태킹 컨텍스트에는 계층 구조가 있으며 각 스태킹 컨텍스트는 부모의 스태킹 컨텍스트의 스택 순서로 간주됩니다.

따라서 다음 HTML로

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

아니오가 얼마나 큰 문제 z-index의 el3설정됩니다, 항상 아래에있을 것입니다 el1그것의 부모가 낮은 스태킹 컨텍스트를 가지고 있기 때문에. 누적 순서 el3가 실제로 3.8 인 수준으로 5 보다 낮은 수준으로 누적 순서를 상상할 수 있습니다. .

부모 요소의 누적 컨텍스트를 확인하려면 다음을 사용할 수 있습니다.

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

MDN의 컨텍스트 스태킹에 대한 훌륭한 기사가 있습니다.

요소에는 position속성 이 있어야 합니다. (예를 들어 absolute, relative, fixed) 또는 z-index하지 않습니다 작동합니다.

대부분의 경우 작동하려면 요소를 배치해야합니다 z-index.

실제로 position: relative문제의 요소에 적용 하면 문제가 해결 될 수 있습니다 (그러나 확실하게 알 수있는 코드가 충분하지 않습니다).

사실 position: fixed, position: absolute그리고 position: sticky또한 가능하게 할 것이다 z-index, 그러나 그 값은 레이아웃을 변경합니다. 와position: relative 레이아웃 방해되지 않습니다.

기본적으로 요소가 position: static기본 설정 이 아닌 한 위치가 고려되어 z-index작동합니다.

"Z- 색인이 왜 작동하지 않습니까?"에 대한 많은 답변 질문은 단지 주장z-index 은 위치 지정된 요소 작동 . CSS3부터는 더 이상 사실이 아닙니다.

플렉스 아이템 또는 그리드 아이템 인 요소 는 is 인 경우 z-index에도 사용할 수 있습니다 .positionstatic

사양에서 :

4.3. 플렉스 아이템 Z 주문

Flex 항목은 순서가 수정 된 문서 순서가 원시 문서 순서 대신 사용되며 is 인 경우에도 스택 컨텍스트를 작성하는 z-index것 이외의 값을 제외하고는 인라인 블록과 정확히 동일하게 페인트합니다 .autopositionstatic

5.4. Z 축 주문 : z-index속성

그리드 항목의 페인팅 순서는 인라인 블록과 동일하지만 주문 수정 문서 순서는 원시 문서 순서 대신 사용됩니다. z-index is 인 auto경우에도 스택 컨텍스트를 만드는 것 이외의 값 position입니다 static.

z-index위치가 지정되지 않은 플렉스 항목에 대한 작업 데모는 다음과 같습니다 . https://jsfiddle.net/m0wddwxs/