CSS3下拉阴影在另一个div下方，z-index无效。

Question

我试图使用投影效果来使一个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;
}

任何想法？谢谢。

- vee

---

另外， https://dev59.com/TlQI5IYBdhLWcg3w-Qhi#54903621 对一些人可能会有帮助。 - aderchox

Answer 1

z-index属性仅适用于 定位元素。这些包括 position: relative、position: absolute、position: fixed 和 position: sticky 元素。

尝试给你的 div #middle 添加 position: relative 属性。

- gearsdigital

---

注意：父元素始终会捕获子元素的阴影，无论其位置和z-index如何（否则可能在子菜单中很有用...）- codepen.io/anon/pen/obJQEJ - Frank N

Answer 2

尝试在要显示在下方的元素上添加一个内嵌的盒子阴影。

.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-index混乱的问题，长期来看你会更加愉快。

- wittmason

Answer 3

建立在其他答案的基础上，我发现将 position: relative 放在 #portal_header_light 上比放在 #middle 上效果更好。这样，我就不必使用 z-index: -1 了，因为它（至少在Chrome中）会破坏光标链接悬停效果并引起一些其他奇怪的问题。

这是简化后的代码：

```html Middle link

```

<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;
}

- thaddeusmt