CSS：将子元素“置于”父元素的插入框阴影之下？答案

【问题标题】：CSS: Place child element "underneath" parent element's inset box shadow?CSS：将子元素“置于”父元素的插入框阴影之下？
【发布时间】：2014-03-02 12:29:41
【问题描述】：

请看这个小提琴，或者下面的代码：

http://jsfiddle.net/MegaMatt3/92G6X/9/

HTML：

<div id="outer">
    <div id="inner"></div>
</div>

CSS：

#outer {
    border: 1px solid black;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;
    height: 200px;
    position: relative;
    width: 200px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

如果我有一个带有嵌入框阴影的父元素和其中的子元素，则子元素会出现在框阴影的顶部。如果可能的话，我希望子元素位于盒子阴影“下方”。该效果基本上会在子元素顶部显示插入框阴影。

我弄乱了 z-index，但没有运气。这可能吗？任何帮助将非常感激。谢谢。

编辑：

这个问题现在有点乱，但我最初的问题应该表明我正在寻找一种在外部 div 具有 不透明 背景时有效的解决方案。我已经更新了我原来的小提琴和代码以反映这种情况。这里的其他答案是有效的，但我标记为正确的答案在那种情况下对我有用。

【问题讨论】：

记得关闭你的div#inner。对于问题：将z-index 设置为负值，然后它将位于下方。
我在内部 div 上的错误。固定。

标签： css insets

【解决方案1】：

另一种适用于非透明背景的解决方案：在伪元素上设置阴影

CSS

#outer {
    border: 1px solid black;
    height: 200px;
    position: relative;
    width: 200px;
    background-color: white;
}

#outer:after {
    content: "";
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

demo

【讨论】：

【解决方案2】：

将 #inner 设置为负 z-index。

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -10;
}

http://jsfiddle.net/S8Sm7/

PS：为了安全起见，请记住关闭标签:)。

【讨论】：

一个很好的解决方案。但应该提到的是，这只适用于具有透明背景的#outer 类。
@Flixer，非常好。它不适用于我的实际站点，这是因为父元素具有背景颜色。应该使示例更具代表性，但我不知道背景颜色对父级很重要。所以我同意 - 这个答案适用于透明背景，但不适用于非透明背景。
但是答案应该对你有用。只需将另一个子元素添加到#outer 元素并为其应用背景颜色。这个元素的 z-Index 应该有一个更大的负值（例如 -11）

【解决方案3】：

我会再添加一个<div>。

您可以使用z-index，但如果<div> 中有其他内容，您将需要全部修改它们或做一些其他修改。我建议添加另一个带有阴影的<div>。这是一个灵活的解决方案。

<div id="outer">    
   <div id="inner"></div>
   <div id="newDiv"></div> // shadow moved to this div
</div>

我在这里遇到了类似的问题css - box shadow covering all contained divs using absolute positioning

此处的示例：http://jsfiddle.net/92G6X/8/

【讨论】：