箱子阴影在下一个兄弟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'的帖子没有使用它自己的divs背景图片,但却找不到任何有关正常兄弟div的内容.

Answer 1

添加position:relative;将修复它.但是,它可能会影响您已经拥有的其他CSS调整.

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