다른 div 아래의 css3 그림자, Z- 색인이 작동하지 않음

다른 div 아래의 css3 그림자, Z- 색인이 작동하지 않음 [중복]

---

이 질문에 이미 답변이 있습니다.

• Z- 색인이 작동하지 않는 이유는 무엇입니까? 4 답변

그림자를 사용하여 하나의 div (헤더)가 다른 div (헤더)보다 "위에"있는 것처럼 보이게하려고합니다. 내 문제는 "중간"div가 그림자를 덮고 있다는 것입니다. z-index를 사용하여 중간 div에 대한 헤더 div를 넣으려고했지만 작동하지 않습니다 (그림자가 여전히 덮여 있음). div 사이에 휴식을 취하면 그림자를 볼 수 있으므로 코드의 일부가 제대로 작동하고 있음을 알 수 있습니다. 다음 HTML 코드가 있습니다.

<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>

그리고이 CSS :

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

    z-index:5;
}

#middle{
    height:308px;
    background-color:white;
    z-index:-1;
}

어떤 아이디어? 감사.

---

이 z-index속성은 배치 된 요소 에서만 작동합니다 . 사람들은 포함 position: relative, position: absolute, position: fixed, 및 position: sticky요소.

div #middle에 position: relative.

---

아래에 표시하려는 요소에 삽입 상자 그림자를 적용하십시오.

.element-that-is-to-be-under{
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd;
    -moz-box-shadow: inset 0 8px 4px -4px #ddd;
    box-shadow: inset 0 8px 4px -4px #ddd;
}

이렇게하면 Z- 색인 셔플이 완화되고 장기적으로 훨씬 더 행복해질 것입니다.

---

여기에 다른 답변을 position: relative바탕 #portal_header_light으로 #middle. 대신 . 그런 다음 z-index: -1(적어도 Chrome에서는) 커서 링크 호버 효과를 엉망으로 만들고 다른 이상한 문제를 일으켰습니다.

http://jsfiddle.net/thaddeusmt/m6bvZ/

다음은 간단한 코드입니다.

<div id="portal_header_light">Header Content</div>
<div id="middle">Test Content</div>

#portal_header_light {
  position: relative;
  padding: 3px;
  background: #eee;
  -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow:  0 4px 10px -2px rgba(0, 0, 0, 0.3);
  z-index:5;
}

#middle{
  height:308px;
  background-color:#fee;
  padding: 3px;
}

참고 URL : https://stackoverflow.com/questions/3258943/css3-drop-shadow-under-another-div-z-index-not-working