4

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

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

4

3 回答 3

8

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

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

演示

于 2014-02-05T21:02:50.800 回答
6

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

于 2014-02-05T20:45:56.140 回答
0

我会添加另一个<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 使用绝对定位覆盖所有包含的 div

这里的例子：http: //jsfiddle.net/92G6X/8/

于 2014-02-05T20:54:41.427 回答