자식 요소를 부모보다 높은 Z- 색인으로 만드는 방법은 무엇입니까?

자식 요소를 부모보다 높은 Z- 색인으로 만드는 방법은 무엇입니까?

---

이 코드가 있다고 가정합니다.

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

이 jsFiddle : http://jsfiddle.net/ZjXMR/

이제 <div class="child">위의 내용 이 필요 <div class="wholePage">하지만 jsFiddle에서 이전에 렌더링 된 자식 요소를 볼 수 있습니다 <div class="wholePage">.

parent클래스 position또는 을 제거하면 z-index모든 것이 제대로 작동합니다. 이것이 필요한 올바른 동작입니다. http://jsfiddle.net/ZjXMR/1/

z-index페이지에서 아무것도 제거하지 않고 어떻게 할 수 있습니까?

---

하위 항목 z-index이 상위 항목과 동일한 스택 인덱스로 설정되어 있으므로 불가능 합니다.

부모에서 Z- 색인을 제거하여 문제를 이미 해결했습니다. 이렇게 유지하거나 요소를 자식 대신 형제로 만듭니다.

---

스타일을 제거하지 않고 원하는 것을 얻으려면 '.parent'클래스의 Z- 색인을 '.wholePage'클래스보다 크게 만들어야합니다.

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

jsFiddle : http://jsfiddle.net/ZjXMR/2/

---

상위 Z- 색인 : -1 또는 불투명도 : 0.99 제공

---

불가능은 없습니다. 힘을 사용하십시오.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

---

하위 요소에서 더 큰 Z- 색인과 함께 비 정적 위치 사용 :

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

.child {
    position: relative;
    z-index: 101;
}

---

이 코드를 사용해보십시오.

z-index: unset;

참고 URL : https://stackoverflow.com/questions/16057361/how-to-make-child-element-higher-z-index-than-parent