css3在另一个div下投影，z-index不起作用[重复]答案

【问题标题】：css3 drop shadow under another div, z-index not working [duplicate]css3在另一个div下投影，z-index不起作用[重复]
【发布时间】：2010-07-15 18:58:08
【问题描述】：

我正在尝试使用阴影使其看起来像一个 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;
}

有什么想法吗？谢谢。

【问题讨论】：

另外stackoverflow.com/a/54903621/9868445 可能对某些人有用。

标签： html css z-index dropshadow

【解决方案1】：

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

试着给你的 div #middle 一个position: relative。

【讨论】：

注意：无论位置和z-index如何，父母总是会捕捉到子元素的阴影（否则可能在子菜单中很有用......）-codepen.io/anon/pen/obJQEJ跨度>

【解决方案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 洗牌，从长远来看，您会更快乐。

【讨论】：

【解决方案3】：

基于此处的其他答案，我发现将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;
}

【讨论】：