下一个兄弟 div 上的框阴影

Question

我在一个 div 上有一个盒子阴影，我想在页面上的下一个 div 上像条一样突出，但是当下一个 div 有背景或背景图像时，它不会显示出来。有没有一种阴影显示在下一个元素上的方法，即使它们都是“位置：初始；” http://jsfiddle.net/2u4Lvyn0/2/ 所以阴影应该忽略它下面的蓝色框

HMTL

<div class="background-image-div"></div>
<div class="box-shadow-div"></div>
<div class="background-image-div"></div>

CSS

.box-shadow-div{
    height:100px;
    background:orange;
    -webkit-box-shadow: 0px 3px 3px 15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 3px 3px 15px rgba(0,0,0,1);
    box-shadow: 0px 3px 3px 15px rgba(0,0,0,1);
}

.background-image-div{
    height:100px;
    background:blue;
    border:1px solid yellow;
}

我看到很多关于“inset box-shadow”的帖子不能使用它自己的 div 背景图像，但找不到任何关于常规兄弟 div 的信息。

Answer 1

添加position:relative; 将修复它。不过，它可能会影响您已有的其他 CSS 调整。

http://jsfiddle.net/2u4Lvyn0/5/