Question

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

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具有非透明背景时。我已经更新了我的原始小提琴和代码以反映这种情况。这里的其他答案都是有效的，但我标记为正确的答案在这种情况下适用于我。

Answer 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

Answer 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：记得关闭你的标签:)只是为了安全。

Answer 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/

CSS：将子元素“置于”父元素的嵌入框阴影下面？

3 个答案: