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

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

그래서 내가 이해한다면,z-index정확하게는, 이 상황에서 완벽할 것입니다.

아래 이미지(태그/카드)를 위의 div 아래에 배치하고 싶습니다.그래서 여러분은 날카로운 모서리를 볼 수 없습니다.이거 어떻게 하는 거지?

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

또는

z-index:100 // on the div above

작동하지도 않습니다.이런 것들의 조합도 마찬가지입니다.왜요?

속성은 다음 값을 가진 요소에서만 작동합니다.static(예:position: absolute;,position: relative;또는position: fixed).

또한 있습니다.position: sticky;파이어폭스에서 지원되며, Safari에서 접두사로 추가되며, 사용자 지정 플래그 아래의 이전 버전의 Chrome에서 한동안 작동했으며, 마이크로소프트는 Edge 브라우저에 추가하는 것을 고려 중입니다.

위치를 다음 값으로 설정한 경우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실제로는 5보다 낮은 3.8입니다.

상위 요소의 스택 컨텍스트를 확인하려는 경우 다음을 사용할 수 있습니다.

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-index가 작동하지 않는 이유는 무엇입니까?"라는 질문에 대한 많은 대답은 다음과 같습니다.z-index 배치된 요소에서만 작동합니다.CSS3부터는 더 이상 사실이 아닙니다.

유연 항목 또는 그리드 항목이 사용할 수 있는 요소z-index경우에도position이라static.

사양에서:

4.3. 유연한 항목 Z-오더

플렉스 항목은 원시 문서 순서 대신 주문 수정된 문서 순서가 사용된다는 점을 제외하고 인라인 블록과 정확히 동일하게 칠합니다.z-index 의 값auto합니다.position이라static.

순서:5.4. Z축 주문:z-index

순서 된 문서 를 사용하는 것을 블록과 .z-index 의 값auto합니다.position이라static.

다음은 의 시연입니다.z-index위치가 지정되지 않은 Flex 항목 작업: https://jsfiddle.net/m0wddwxs/

요소가 상위 z-index 수준으로 인해 하위 스택 컨텍스트에 있으므로 z-index로 제어할 이 요소에 z-index 속성을 가진 상위 요소가 없는지 확인합니다.

다음은 예입니다.

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

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

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

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

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

위의 예에서 "content"가 z-index 속성을 가진 상위 항목이기 때문에 내용이 모달 위에 표시되지만 모달의 z-index가 내용보다 높습니다.

다음은 z-index가 작동하지 않는 4가지 이유를 설명하는 기사입니다. https://coder-coder.com/z-index-isnt-working/

Z 인덱스가 작동하려면 다음이 필요합니다.

1. 위치: 상대, 절대, 고정, ...
2. '으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으으이overflow: hidden;

를 겪었습니다.z-index배경색을 다음과 같이 설정하여 수정했습니다.

 background-color: white;

만약 모든 것이 실패한다면, 당신의 HTML에서 구문 오류를 찾아보세요. 그것은 직관적이지 않지만, 나는 그것이 왜 그런지 알고 있습니다.z-index작동하지 않습니다.

다음 코드에 잘못된 HTML 구문이 있습니다.

<div class="over"/>
<div class="under"/>

...(div는 자체 폐쇄 태그가 아니므로 잘못된 구문입니다.)

요소에 된 CSS , HTML 요소의 경우 CSS 속성background-color: black,position: fixed,width: 150px,그리고.top:150px모두 예상대로 작동하고 있었습니다. 하만지그, 그.z-index: 2부동산이 정확히 같은 조건에서 작동하지 않았습니다.

잘못된 HTML이 수정되었을 때만z-index올바르게 작동합니다.

왜 그런지 모르겠어요.z-index다른 CSS 속성보다 더 까다로웠지만, 아마도 이 대답은 누군가를 도울 수 있을 것입니다.

codercoder.com 에서 답변을 받았습니다.내 코드에서 Navbar의 불투명도를 0.9로 설정했습니다.

를 됩니다.opacity 속성, Navbar속 CSS ,z-index예상대로 작동합니다.

내 경우 상위 요소를 z-index: -1로 설정하면 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/9191803/why-does-z-index-not-work